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
Articolo modificato , non serve aggiungere anche width e height sull’hover.
Grazie molto utile 😉
Ciao. Conosco l’html ma non sono affatto esperto di css. Ho provato a copiare il codice ed adattarlo ai miei bisogni, ossia una immagine che cambia quando si passa sopra il cursore ed ha un link ad una pagina, ma non funziona.
Mi serve una mano per risolvere.
Questo è il codice:
index 2
a#cambio{background: url(bilder/storia.jpg); no-repeat;}
a:hover#cambio{background: url(bilder/storian.jpg); no-repeat;}
link
Grazie mille
Ops. Ho sbagliato a copiare il codice. Riprovo.
Grazie
index 2
a#cambio{background: url(bilder/storia.jpg); no-repeat;}
a:hover#cambio{background: url(bilder/storian.jpg); no-repeat;}
link
Niente.
index 2
a#cambio{background: url(bilder/storia.jpg); no-repeat;}
a:hover#cambio{background: url(bilder/storian.jpg); no-repeat;}
link
Rinuncio in attesa di qualche buon’anima che mi spieghi.
Ciao leo che errore ti dà? le possibile soluzioni sono che l’indirizzo dell’immagine non è corretto oppure hai inserito solo il css senza inserire l’indentificativo al collegamento ipertestuale , per riprovare inserisci tutto il codice in una pagina di prova:
Ciao Francesco e grazie per la risposta. Praticamente il tasto che devo inserire, fatto da una immagine, si rimpicciolisce alle dimensioni della parola “link”. Io non dovrei scrivere nulla perchè l’immagine stassa dovrebbe fungere da link quando ci clicco sopra.
Se il tasto prende le dimensioni del link, forse non hai settato la dimensione dell’immagine nel css.
Inserisci width e height nella classe per non avere problemi di dimensione.
Stessa cosa per il link, come spiegato nell’articolo se utilizzi nel css “text-indent: -9999px;” non vedrai nessuna parola scritta ma solo l’immagine hover.
Ciao Francesco. In effetti oggi ci pensavo. Stasera avrei provato a mettere le dimensioni delle immagini che uso come tasti. Dopo proverò. Ma non c’è un altro modo per togliere di mezzo il testo anzichè l’indentazione? Quel valore dovrebbe significare che il testo viene piazzato praticamente all’esterno del video, no?
Grazie ancora
Controlla pure l’altro articolo che ho scritto:
http://www.webfd.eu/image-hover-cambio-immagine-con-il-mouse-metodi-alternativi
Perfetto, funziona tutto. Ora rimane il problema di centrare le immagini all’interno delle celle della tabella. Son riuscito a centrarle verticalmente, devo vedere come farlo orizzontalmente. Ho rpovato diversi valori ma non cambia niente, probabilmente ho scritto male o nel posto sbagliato.
Ora provo a dare una letta al tuo altro articolo.
In genere per centrare un div o un qualsiasi altro elemento puoi utilizzare i vecchio e caro
< center> …. . (rimuovi gli spazi)
Se proprio non ne vuole sapere settalo dal css
scrivendo
.nome del tuo div o classe { margin:0 auto; }la tabella che contiente le immagini/pulsanti non è inclusa in un div. E’ praticamente una tabella con una sola riga e cinque celle che contengono ognuna una immagine/pulsante. Ho tolto lo spazio in ogni cella e ora le immagini sono centrate verticamente, ma non si muovono orizzontalmente. Farò delle prove.
😉
se vuoi che ogni cella centri il contenuto. Puoi utilizzare
table td{text-align:center;}
😉
Il metodo funziona, non crea però problemi di possibili penalizzazioni di Google, per via del fatto che si inseriscano in realtà link vuoti? In quanto è questo che accade, c’è il tag a ma al suo interno non c’è niente.
Ciao carlo grazie per il tuo feed! Nel secondo esempio mostra come evitare penalizzazioni con un codice pulito e veloce.
ciao 🙂 ho trovato davvero molto utile questo sito e sono riuscita così ad applicare il cambio di immagine senza usare script, però avrei bisogno di una cosuccia se possibile sempre attraverso il css.. se quell’immagine che cambia al passaggio del mouse volessi che resti fissa quando il link viene cliccato?? ossia ho l’immagine1, passo il mouse sopra e cambia con l’immagine2, clicco con il mouse e resta fissa l’immagine2, clicco un altra voce del menu e torna all’immagine1, spero di essermi spigata, grazie tantissimo in anticipo
Grazie, molto utile 😀
Ciao, ho provato il tuo codice ma non mi funziona e spero tu possa aiutarmi perchè ho provato una miriade di modi ma non va..
#cambio{
background: url(img/home.png);
display:block;
text-indent: -9999px;
}
#cambio:hover{
background: url(img/home_hover.png);
}
il risultato è questo http://img18.imageshack.us/img18/6500/4r7c.png
Ciao hai dimenticato di impostare l’id sul collegamento ipertestuale semplicemente usa questo codice