[résolu] Onmouseover sur une image

Bonjour,

Je souhaite créer un lien avec une image. Mon idée est de donner un effet visuel lors du survol du lien avec la souris, en créant un changement d'image.

Je voulais savoir quelle technique je peux utiliser ?
Est-ce que l'utilisation de onmouseover est toujours d'actualité ? si oui, où puis-je trouver un exemple ?

Y a-t-il d'autres technique, avec par exemple, du jquery ?

Merci
Modifié par nforum (09 Jun 2009 - 16:58)

Bonjour,

nforum a écrit :
Est-ce que l'utilisation de onmouseover est toujours d'actualité ?

À priori, oui. Si ton image porte une information (cas typique: une image-bouton, où l'image porte un texte qui donne la fonction du bouton), cette image doit donc être dans le code HTML et doit être dotée d'un attribut alt correctement renseigné. Tu peux alors utiliser l'évènement onmouseover pour changer l'attribut src de l'image.

nforum a écrit :
si oui, où puis-je trouver un exemple ?

Pour la version la plus simple, pas besoin d'exemple long, ça se règle rapidement:

<img
    alt="Valider l'inscription"
    src="/img/bouton-inscription-1.png"
    onmouseover="this.src='/img/bouton-inscription-2.png'"
    onmouseout="this.src='/img/bouton-inscription-1.png'"
/>

Deux problèmes avec cette solution:
1. Si on a beaucoup de boutons de ce genre, le code HTML devient vite lourd.
2. Pas de préchargement de la deuxième image.

Certains scripts JS proposent quelque chose de plus complet.

nforum a écrit :
Y a-t-il d'autres technique, avec par exemple, du jquery ?

jQuery c'est avant tout du JavaScript. Comme je le disais certains scripts proposent quelque chose de plus complet, qui permet de faire du JavaScript dit «non intrusif» et de précharger les images au chargement de la page. Ces scripts peuvent reposer sur une bibliothèque JavaScript telle que jQuery, YUI, Mootools... ou pas.

Je n'ai pas de script de qualité en tête, mais ça doit se trouver.

Merci Florent