Oggi vi guiderò in poche semplici righe di codici nella creazione di un hover di immagini , questo che vi andrò a mostrare è solo 1 dei metodi per creare uno switch di immagini con hover
<html>
<head>
<style>
a#cambio{background: url(1.png);width:201px;height:193px;display:block;text-indent: -9999px;}
a:hover#cambio{background: url(2.png);}
</style>
</head>
<body>
<a href="" id="cambio">link</a>
</body>
</html>
Per evitare penalizzazioni su google può essere utilizzato anche direttamente un identificativo sull’immagine in questo modo:
<style>
#cambio{background: url(1.png);width:201px;height:193px;display:block;text-indent: -9999px;}<br />
#cambio:hover{background: url(2.png);}<br />
</style>
<a href="#"><img id="cambio" title="descrizione immagine" /></a>
Il risultato è praticamente lo stesso.
Prima di controllare il codice è da chiarire che la funzione: “text-indent: -9999px;” può essere tranquillamente cancellata , se il collegamento ipertestuale è privo di testo come in questo caso
<a id="cambio"></a>
Oppure se vuoi puoi omettere direttamente l’utilizzo del link testuale dal codice, senza usare il text-indeed.
Consulta anche l’altra guida sull’image hover con metodi alternativi semplificati Image Hover 2