• 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 qui change au survol (HTML)

    Image 2 > Image qui change au survol (HTML)

     

    Pour mon exemple j'ai gardé la même image en ajoutant simplement du texte mais vous pouvez mettre ce que vous voulez.


  • Commentaires

    1
    Vendredi 17 Novembre 2017 à 15:33

    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>

    2
    Vendredi 17 Novembre 2017 à 19:18
    Ha oui non mais je sais pas pourquoi moi ça marche pas.
    • Voir les réponses
    3
    Samedi 25 Novembre 2017 à 16:38

    Super code ;)

    4
    Jeudi 4 Janvier à 11:19

    Moi, ça ne marche pas non plus, ça me fait la même chose qu'à Hirsch, je ne comprends pas...

    5
    Jeudi 26 Avril à 17:07

    Merci beaucoup pour le code, il est vraiment super pratique ! J'en ferai bon usage :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :