Changement d’image au survol de la souris

16 5269

Si vous désirez donner un effet à une image, un peu comme lorsque vous survolez mon gravatar sur votre droite, ou alors faire disparaître une image lors du passage de la souris, voici comment procéder.

Changer d’image au survol de la souris


Alors avant de vous donner le code, il va vous falloir une image de base, et une seconde avec l’effet, comme par exemple un ombrage (fait sur photoshop).

Une fois que vous avez vos deux photos, mettez les dans votre FTP, ou importez les via WordPress.

Conservez les url de chacune de vos deux images.

Code html pour changer d’image au survol

Maintenant, allez dans votre fichier, là où vous souhaitez insérer votre image.

Au lieu de mettre ce genre de code :

<img src="http://www.urldusite.com/urldetonimage.jpg">

On va faire appel à une fonction html pour appeler une image 1

– on ouvre le code avec

<a

– on appel l’image 1 quand la souris est en position « dessus »

onmouseover="document.photo.src='http://www.urldusite.com/urldetonimage-une.jpg'"

– on appel l’image 2 quand la souris est en position « dehors »

onmouseout=
 "document.photo2.src='http://www.urldusite.com/urldetonimage-2.jpg'"

– on peut rajouter un lien vers une page, ou un site externe (optionnel mais pratique pour un logo de site)

href="http://www.url-ou-limage-va-pointer.com">

– on viens définir une image de base qui sera affiché dès l’ouverture de votre page

<img name="photo" src=
 "http://www.urldusite.com/urldetonimage-1-ou-2.jpg" alt="" style="border: 0px none;" title="titre de l'image" id="photo2" >

– on ferme le code

</a>

Ce qui au final vous donne un code html tel que ci dessous :

<a onmouseover="document.photo.src='http://www.urldusite.com/urldetonimage-une.jpg'" onmouseout=
 "document.photo2.src='http://www.urldusite.com/urldetonimage-2.jpg'" href="http://www.url-ou-limage-va-pointer.com"><img name="photo" src=
 "http://www.urldusite.com/urldetonimage-2.jpg" alt="" style="border: 0px none;" title="" id="photo2" ></a>

Le texte de cette couleur peut être supprimé, mettez le uniquement si vous souhaitez faire pointer vos images vers une page spécifique de votre site, ou une page externe.

Le texte de cette couleur fait référence aux id photos, ‘photo’ et ‘photo2’ pour cette exemple.

Le texte de cette couleur fait référence aux liens vers vos images.

Voilà pour la petite astuce, bien pratique pour donner des effets à vos images sur votre site.

Grâce à cela, vous pouvez comme sur mon logo, ou mon gravatar, afficher une seconde image lors du survol de vos images avec votre souris. Je vous laisse imaginer toutes les possibilités qui s’offrent à vous.

Si vous appliquez cette technique, laissez vos liens en commentaires que l’on puisse constater sur vos sites.

16 Commentaires

  1. Top, ton tuto, comme toujours, je garde ça sous le coude quand le besoin s’en fera sentir.

    Sinon, tu connais un bon plugin pour faire un zoom sur une image (ex: pour un site e-commerce)

    Par contre, et là, c’est un réflexe de référenceur, il y a une faute de frappe dans ton URL (changemen sans le t à la fin….), heureusement que ce n’est pas sur un mot important, mais je ne pouvais pas ne pas te le dire.

    A bientôt

    Michael

  2. J’ai lu je ne sais plus trop ou qu’il vaut mieux externaliser tous ses scripts javascripts dans un fichier « externe » afin de ne pas alourdir le code de ses pages, savez vous si c’est vrai ? Car je trouve qu’il est plus simple de mettre ce code dans mon fichier header.

    • Oui il est préférable de placer tes scripts en Footer par exemple.

      L’objectif :
      Quand ton site se lancera, le contenu sera alors affiché avant que le script soit sollicité, ce qui sera transparent pour le visiteur.

      Après on peut aussi parler de tes images qu’il vaut mieux placer dans un cdn maison (pour qu’elles chargent plus vite).

    • Merci, c’est bien de proposer différentes méthodes.

      Le Css n’est pas à la portée de tout le monde, pour commencer, les novices se contenteront d’un simple copié collé de ce code je pense.

      Concernant le code plus propre, je dis oui, mais il en sera aussi plus lourd !

  3. Bonjour,
    J’utilise WordPress, j’ai essayé d’intégrer ce code sur mon site en ajoutant un widget « texte » mais cela ne fonctionne pas, une fois que j’enregistre, cela affiche «   »
    Aurais-tu une solution pour moi ?
    Merci beaucoup par avance !

    • Le widget prend par défaut le html. Tu ne devrais pas avoir de soucis, donne moi ton code que je vois.

  4. Merci pour ces infos, mais je n’ai pas bien compris le code html qu’il faut appliquer pour ceci :
    Quand on a placé une image dans un article, et que l’on veut que, au passage de la souris, simplement afficher une seconde image qui se substitue donc à la première, et qui disparaît quand la souris n’est plus sur l’image laissant voir la première image. (sans faire de liens vers d’autres pages). Comment on peut faire cette astuce, svp ?
    Merci

  5. j’y arrive po !
    j’essaie j’essaie, j’y arrive po !
    donc j’ai hebergé des images, sur mon blog wordpress
    j’ai donc mis mon url de mon blog, enfin je crois
    pis j’ai mis mon url de ma premiere image, bon je crois aussi
    pis l url de la seconde image, heu, enfin j’espere que j’ai bien fait

    sauf que j’y arrive po !

    qu’est ce que je fais de pas bien ?

    autre chose, je cherche depuis plusieurs heures, comment faire un code pour mettre du texte sur une image,,
    devinez ? j’y arrive po !

    je suis donc sur wordpress, j’ai un blog qui me plait, j’ai réussi a avoir des creas grace a une dame qui fait des belles choses mais je voudrai y arriver seule,

    bonne journée et bonnes fetes pour les jours qui arrivent,

Réagis