ATTENZIONE!

Questo articolo è stato scritto nel 2016, le informazioni riportate potrebbero essere incomplete o non aggiornate. Per qualsiasi dubbio o chiarimento lascia un commento in fondo all'articolo.

Immagine Pop Up al passaggio sul testo

 In Web Design

Spesso può capitare di voler inserire delle immagini sul nostro sito che non trovano posto nel testo, per non rinunciare alla preziosa risorsa e volendo allo stesso tempo tenere pulita la pagina possiamo utilizzare un’immagine pop up che compaia solo quando si passa il mouse sulla parola da noi scelta.

In realtà l’uso di questa tecnica è molto più vasto di quanto può apparire, da un’idea di dinamismo molto interessante e può essere associato a nomi di marchi e imprese, così da mostrarne il logo ogni volta che se ne cita uno, oppure possiamo scegliere di presentare delle preview dei link utilizzati nella pagina.

Come creare un’immagine pop up?

Il codice da utilizzare è estremamente semplice, una link in html e un semplice intervento sul CSS. Vale tuttavia la pena analizzare il funzionamento del codice per capirne a pieno le funzionalità.

Partiamo subito con la componente html della nostra “Immagine pop up” da inserire dove necessario nella pagina web

<a href=”#”>Testo<img src=”url-immagine” alt=”” /></a>

Non potrebbe essere più semplice, si crea un link contenente il testo e l’immagine che deve comparire al passaggio del mouse. Nel nostro caso non vogliamo che il testo rimandi a nulla ma esattamente come per qualsiasi link nulla vieta di collegarlo in base alle nostre preferenze, questo non influisce minimamente sulla funzione dell’immagine pop up.

Il passaggio successivo è creare la regola che nasconde l’immagine finché non ci si passa sopra con il mouse. Per ottenere questo risultato abbiamo scelto di usare la soluzione più semplice, evitando l’uso di javascript, utilizzando i CSS e la regola display per creare l’effetto da noi desiderato

a img { display:none; }
a:hover img { display:block; }

Ora tutto dovrebbe funzionare correttamente e così con un semplicissimo “gioco di stile” abbiamo ottenuto la nostra immagine pop up.

Attenzione!

Un problema che spesso e volentieri ci si trova ad affrontare è che la pagina conterrà altre immagini linkate che verranno automaticamente nascoste dalla nostra regola CSS.

Per ovviare a questo problema consiglio sempre di inserire il link in un <div> a cui attribuiamo una class a nostra scelta, così da modificare nel foglio di stile solo i link contenuti in quella classe.

Ora siete in grado di creare a vostro piacimento un’immagine pop up che compare al passaggio sul testo da voi scelto, potrete sbizzarrirvi con i CSS per creare una grafica accattivante al pop up, le customizzazioni sono talmente tante che non ci sono limiti se non la vostra fantasia.

Davide Gavazzi
Davide Gavazzi, appassionato di SEO, SEM, Social Media Marketing e Web Design. Si occupa di Web dal 2011 creando e gestendo siti, Social, Pubblicità e tutto ciò che riguarda l'Online.
Recommended Posts

Lascia un commento

Contattami

Hai domande? Puoi scrivermi utilizzando il form seguente e sarai ricontattato il prima possibile.

Non leggibile? Cambia testo.

Start typing and press Enter to search