-
Image qui change au survol (HTML)
Vous savez tous sans doute que pour changer une image au survol en CSS il faut utilisé :hover, exemple: #header :hover Mais là, rien à voir, je vais vous montrer comment faire en HTML pour vos articles ou modules. Je vous préviens ça va être très très simple ^^'
I- Le code.
<img src="image1.png" onmouseover="this.src='image2.png'"onmouseout="this.src='image1.png'" />
Il faut évidemment 2 images (2 liens, il faut donc héberger les images):
Image 1 (en bleu), celle que l'on voit en premier et l'image 2 (en orange), celle qui apparaît lorsque qu'on survole la première. Pour ce code il est recommandé d’utilisé des images au format .png
II- Mon exemple.
Image 1 >
Image 2 >
Pour mon exemple j'ai gardé la même image en ajoutant simplement du texte mais vous pouvez mettre ce que vous voulez.
-
Commentaires
Moi, ça ne marche pas non plus, ça me fait la même chose qu'à Hirsch, je ne comprends pas...
Suivre le flux RSS des commentaires
Ajouter un commentaire
Je ne comprends pas pourquoi mais je n'ai aucune image qui s'affiche. J'ai pourtant bien mit mes url d'image... Et quand je regrade ce qu'est devenu le code j'ai ça : <p><img src="IMAGE1.png" alt="" /></p>
Je viens de refaire un teste avec le code, ça fonctionne.
Peux-tu me donner ton code avant que tu ne valide ? Où tes images ?
Oui j'ai ça:
<img src="http://ekladata.com/-vO7DBTwY0iXHo6t2D67E0NuwOs/Sans-titre-10.png" onmouseover="this.src='http://ekladata.com/ZqrhSzzFWKCSN0mH7IQ9PzYJPzk/10843fb6436f4509880a138a68bb9c87.gif'" onmouseout="this.src='http://ekladata.com/-vO7DBTwY0iXHo6t2D67E0NuwOs/Sans-titre-10.png'" />
Si ça se trouve c'est juste moi qui ne suis pas douée.
Ton code fonctionne pourtant ^^ Je l'ai copié ici.