Cambio immagine al passaggio del mouse – css hover img
5 su 3 voti
Tempo di lettura: Meno di 1 minuto

Cambio immagine al passaggio del mouse – css hover img

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

Anteprima:

<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

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

  1. 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

    0
  2. 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

    0
  3. 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:

    
    
    
    
    
    link
    
    
    
    0
  4. 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.

    0
  5. 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.

    0
  6. 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

    0
  7. 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.

    0
  8. 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;
    }
    
    0
  9. 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.
    😉

    0
  10. 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.

    0
  11. 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

    0