Attenzione!

Questo articolo è stato pubblicato nel 2016, le informazioni contenute potrebbero quindi non essere aggiornate.
Se avete dubbi lasciate un commento in fondo all'articolo.

Immagine Pop Up al passaggio sul testo

Una semplice regola CSS

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.

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

Commenta per primo

Lascia un commento

L'indirizzo email non sarà pubblicato.


*