Navigazione

    Privacy - Termini e condizioni
    © 2020 Search On Media Group S.r.l.
    • Registrati
    • Accedi
    • CATEGORIES
    • Discussioni
    • Non letti
    • Recenti
    • Hashtags
    • Popolare
    • Utenti
    • Stream
    • Interest
    • Categories
    1. Home
    2. Categorie
    3. Coding e Sistemistica
    4. Coding
    5. Link del menu con effetto rollover fatto con i soli CSS
    Questa discussione è stata cancellata. Solo gli utenti con diritti di gestione possono vederla.
    • C
      claudioweb Super User • ultima modifica di

      Personalmente credo che, cercando di conservare il codice della tua pagina, puoi fare così:

      ogni tasto nella tua pagina è fatta da due immagini sovrapposte. Una di sfondo e una che contiene il testo.
      Quindi lasciando lo sfondo invariato, puoi interessarti al codice che riguarda l'immagine con testo.

      Ad esempio il link alla home:

      
         <TD vAlign=center align=middle width=118 height=31>[url="javascript:;"]![image](Davide Muci fotografo e SEO specialist - fotografia di danza, sportiva, di scena, sociale - web marketing specialist_file/home.gif)</TD>
      
      

      Puoi modificarlo sostituendo questo codice:

          <TD vAlign=center align=middle width=118 height=31>[url="http&#58;//www.davidemuci.it/"]HOME</TD>
      
      

      Poi ti modifichi lo stile dal CSS a tuo piacimento.

      In questo modo elimini solo un'immagine, quella con il testo, ma lo sfondo rimane.
      Ne hai anche il vantaggio di avere dei link testuali.

      Ho fatto qualche tentativo e si vede bene con Explorer. Prova la modifica e testala con vari browser e risoluzioni.

      Non so se a te piace così. Ma l'effetto non cambia di molto, se non per il font.

      0 Miglior Risposta Ringrazia Cita Rispondi

        1 Risposta Ultima Risposta
      • C
        claudioweb Super User • ultima modifica di

        Riporto qui un link che spiega bene un bel pò di cose in maniera chiara 🙂

        [url=http://www.gdesign.it/pages/howto/articoli/rollcss/rollcss.php]Rollover css

        Inoltre ho editato il title del post

        :ciauz:

        0 Miglior Risposta Ringrazia Cita Rispondi

          1 Risposta Ultima Risposta
        • D
          dadevr User • ultima modifica di

          Mi è venuta un'idea bizzarra: se facessi 5 include, ciascuno per ogni voce del menù non ci sarebbe più il problema della larghezza variabile. Portrei quindi posizionare il rollover con background-position!

          Che ne dite?

          0 Miglior Risposta Ringrazia Cita Rispondi

            1 Risposta Ultima Risposta
          • R
            riky78 User Attivo • ultima modifica di

            :mmm:

            non ho capito...

            0 Miglior Risposta Ringrazia Cita Rispondi

              1 Risposta Ultima Risposta
            • D
              dadevr User • ultima modifica di

              scusate ho detto una cazzata

              0 Miglior Risposta Ringrazia Cita Rispondi

                1 Risposta Ultima Risposta
              • D
                dadevr User • ultima modifica di

                problema risolto:

                1- ho creato un bottone con photoshop con lo stesso sfondo del mio menu
                2- ho scritto una voce del menù ad esempio - Home -
                3- a questo punto ho fatto in modo che la scritta home diventasse trasparente. in pratica l'ho selezionata con la bacchetta magica e poi ho premuto canc.
                4- a questo punto basta sistemare il foglio di stile:
                <style type="text/css">
                <!--

                #home a{background: white;}
                a:hover{background: yellow;}
                -->
                </style>

                [/img]

                0 Miglior Risposta Ringrazia Cita Rispondi

                  1 Risposta Ultima Risposta
                • R
                  riky78 User Attivo • ultima modifica di

                  ingengoso 🙂

                  controlla che funzioni con tutti i browser :ciauz:

                  0 Miglior Risposta Ringrazia Cita Rispondi

                    1 Risposta Ultima Risposta
                  • C
                    claudioweb Super User • ultima modifica di

                    L'importante è che tu abbia risolto 🙂

                    :ciauz:

                    0 Miglior Risposta Ringrazia Cita Rispondi

                      1 Risposta Ultima Risposta
                    • esteban
                      esteban Moderatore • ultima modifica di

                      l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
                      se ti va bene fammelo sapere

                      0 Miglior Risposta Ringrazia Cita Rispondi

                        1 Risposta Ultima Risposta
                      • R
                        riky78 User Attivo • ultima modifica di

                        @esteban said:

                        l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
                        se ti va bene fammelo sapere

                        questa è un cosa che mi succede spesso con IE (ovviamente solo con lui) e sinceramente non sono mai riuscito a risolverlo...

                        0 Miglior Risposta Ringrazia Cita Rispondi

                          1 Risposta Ultima Risposta
                        • D
                          dadevr User • ultima modifica di

                          Vi riferite al flickering?

                          Ho letto un articolo il quale diceva che per eliminare questo fenomeno è sufficiente specificare lo stesso sfondo dei link anche sul list-item.

                          0 Miglior Risposta Ringrazia Cita Rispondi

                            1 Risposta Ultima Risposta
                          Caricamento altri post
                          Rispondi
                          • Topic risposta
                          Effettua l'accesso per rispondere
                          • Da Vecchi a Nuovi
                          • Da Nuovi a Vecchi
                          • Più Voti