• 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 rose), 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’utiliser 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
    Jeudi 4 Janvier 2018 à 11:19

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

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    4
    Jeudi 26 Avril 2018 à 17:07

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

    5
    Samedi 29 Décembre 2018 à 13:27

    Oh wow ! je suis complètement fane de ce blog. Il est si complet et bien expliqué ! bien rangé. Je vous pouvoir compléter la décoration de mes blog avec bien des problèmes en moins et une panoplie de possibilité beaucoup plus grande. Je continu ma visite ^^

    • Voir les réponses
    6
    Mardi 3 Octobre 2023 à 12:40

    Bonjour Kalyna

    Ce blog est une mine d'or !

    Si je galère avec le tuto sur la "grid" (et c'est rien de le dire ! je ne rame pas, je coule !), celui-ci est à la portée de mon QI ! Fingers in ze nose !

    Un grand merci pour ces explications très claires.
    Bonne journée

    • Voir les réponses
    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter