[Résolu] Mettre une image en hover sur une image

Bonjour

Je souhaiterais faire un hover sur une image. Si je fais :

<img src="image1" />
img:hover{background:url(image2);}

L'image mise en css n'apparait pas... Une idée ?

Merci
Modifié par Melusine85 (20 Feb 2012 - 09:39)

Deux choix,
En HTML/CSS

<div id="fondImage"></div>

#fondImage { background-image : url(image1); width : x; height : y; }
#fondImage:hover { background-image : url(image2); }

Mais si ton image est porteuse d'information, il faudra la mettre dans le code HTML et dans ce cas, JS devient nécessaire...
Modifié par Gothor (17 Feb 2012 - 16:52)

En javascript:
<img src="image1" onMouseOver="this.src='image2'"/>

WebD a écrit :
En javascript:
&lt;img src=&quot;image1&quot; onMouseOver=&quot;this.src='image2'&quot;/&gt;

Je dirais même plus

<img src="image1" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />

Merci de vos réponse.

J'aurais du préciser que mes images sont insérer dynamiquement, elle proviennent d'un carousel, je ne peut donc pas (je pense) appliqué vos méthodes

Si tes images sont dans une div, tu peux tenter quelque chose du genre :

div {
    background-image : url(tonimage2);
    background-repeat : no-repeat;
}
div img {
    opacity : 0;
}

Modifié par Gothor (18 Feb 2012 - 15:11)

Ok Merci. Je testerais Lundi car c'est pour le boulot ^^
Bon week-end

Bonjour

Merci beaucoup ça fonctionne !

Bonne journée