[Résolu] Changement d'image au passage du curseur dessus

[Gabriel]

Bonjour !

Je me demandais comment il fallait faire pour que lorsque le joueur passe la souris sur une image (dans mon cas une image du menu), l'image change :
http://www.ngswing.com/index.php
Sur ce site, on voit bien le changement sur le menu.

Merci d'avance pour votre aide !

[Argorate]

c'est assez simple !

utilise l'événement onmouseover et après il suffit de changer la source de l'image, c'est a dire le src...

Code PHP :

<?php 

<img onmouseover="this.src= 'images/test.jpg'" src="images/test_depart.jpg> 

[Gabriel]

Merci beaucoup, je ne pense jamais à ces évènements... J'y songerais d'avantage à l'avenir.

[Argorate]

oui c'est très pratique!

keydown aussi^^ onmouseout egalement etc...

[Gabriel]

J'ai justement rajouté un onmouseout pour que l'image revienne à la normal après !

[wild-D]

en même temps si tu fais ça que sur des liens de tes menus (sous ff, opera ça marche pour touts les élément du DOM, IE lui est plus réclacitrant -enfin je sais pas pour IE8-); autant passer par la pseudo classe :hover dans ta feuille de style avec simplement une image en background.

d'ailleurs le site fourni en exemple utilise cette méthode (je pige pas pourquoi tu n'as même pas regardé le code du site en question ?)

[Sephi-Chan]

Bonsoir,

Si la technique présentée est fonctionne et pratique, elle reste plutôt sale. Les bonnes pratiques de ces dernières années suggèrent en effet d'externaliser ce genre de scripts.

Pour cela, on utilise des gestionnaire d'événements Javascript. Un jolie explication (à lire en entier) de cette fonctionnalité est apportée sur Alsacréations - La gestion des événements en JavaScript.

Cela dit, cela nécessite tout de même une bonne maîtrise de Javascript. Des librairies comme jQuery, qui permettent d'avoir un code propre sans se soucier des mécanismes parfois tordus (à cause de la compatibilité des différents navigateur) de Javascript.

$(document).ready(function(){

  

  $("img#rollover_img").hover(

    function(){

      $(this).attr("src", "images/image_au_survol.png");

    },

    function(){

      $(this).attr("src", "images/image_au_repos.png");

    }

  );

  

});

Sache également qu'il est possible de faire des effets de rollover avec CSS uniquement. Un autre très bon article qui en parle : Aslacréations - Créer des menus simples en CSS.


Sephi-Chan

[Argorate]

Du Jquerry pour un truc aussi basique? ^^

Faut peut etre pas abusé là

pourquoi faire compliqué?

[Sephi-Chan]

Tu noteras que je ne propose pas que jQuery dans mon message, mais différents moyens plus propre que les balises en ligne. Est-ce un mal ou un abus ?

De plus, jQuery est plus simple à mettre en place qu'un gestionnaire d'événement DOM pour quelqu'un qui n'est pas à l'aise en Javascript.

Enfin, les rollovers ne sont sans doute pas les seules choses qu'il peut vouloir faire en Javascript.

J'espère avoir répondu à tes questions.


Sephi-Chan

[Gabriel]

Je ne maîtrise pas du tout le Java Script donc j'ai préféré utiliser la méthode d'argorate. Le jour ou je me mettrais à ce langage, j'adopterais alors les "bonnes pratiques" de Sephi-Chan !