Image Hover , cambio immagine con il mouse – metodi alternativi
5 su 3 voti
Tempo di lettura: Meno di 1 minuto

Image Hover , cambio immagine con il mouse – metodi alternativi

Visto il successo dell’altro articolo Css Img hover immagini mouse, ho deciso di mostrarvi un’altro metodo di image hover semplificato sul DIV, che può essere implementato velocemente con il collegamento ipertestuale con JS.

Per testare il codice, utilizzate il codice sottostante ricordandovi di modificare gli indirizzi delle immagini:

<h2>Demo</h2>
<style>
#.hover1{width:180px; height:121px; background:url(indirizzo1;}<br />
#hover1:hover{width:180px; height:121px; background:url(indirizzo2);}<br />
</style>
<a id="hover1"></a>

Demo


Per implementare il collegamento ipertestuale sulla vostra immagine potete sia utilizzare JS in questo modo:

<a class="hover1" href="#"></a>

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

  1. ciao mi chiamo ketty, innanzi tutto ti auguro buone feste.
    volevo una delucidazione sul codice relativo a Image Hover , cambio immagine con il mouse – metodi alternativi e quello dell’articolo Css – Image hover, cambio immagini al passaggio del mouse. funziona anche cambiando una immagine piccola in una piu grande? e in quel caso come dovrei fare?
    stavo cercando un codice che si puo usare in alternativa al JS, perchè lo scorso anno mi hanno attaccato il sito attaccando un trojan in un piccolo javascript e di conseguenza ho eliminato tutti i js dal sito, solo che avrei bisogno di un codice che mi ingrandisse le immagini al passaggio del mouse per non appesantire troppo il sito, visto che faccio grafica digitale, ma ho cercato in php e non ho trovato niente, ma forse sono io che non so cercare.
    ti ringrazio della cortese disponibilità, e buon proseguimento delle festività Natalizie. ketty

  2. Ciao ketty si può fare tranquillamente settandolo nel css

    
    

    su hover1:hover imposti width e height della nuova immagine