+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Changement d'image au passage du curseur dessus (/showthread.php?tid=3981)
Pages :
1
2
[Résolu] Changement d'image au passage du curseur dessus - Gabriel - 18-05-2009
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 !
RE: Changement d'image au passage du curseur dessus - Argorate - 18-05-2009
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>
RE: Changement d'image au passage du curseur dessus - Gabriel - 18-05-2009
Merci beaucoup, je ne pense jamais à ces évènements... J'y songerais d'avantage à l'avenir.
RE: [resolu]Changement d'image au passage du curseur dessus - Argorate - 18-05-2009
oui c'est très pratique!
keydown aussi^^ onmouseout egalement etc...
RE: [resolu]Changement d'image au passage du curseur dessus - Gabriel - 18-05-2009
J'ai justement rajouté un onmouseout pour que l'image revienne à la normal après !
RE: [Résolu] Changement d'image au passage du curseur dessus - wild-D - 18-05-2009
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 ?)
RE: [Résolu] Changement d'image au passage du curseur dessus - Sephi-Chan - 18-05-2009
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
RE: [Résolu] Changement d'image au passage du curseur dessus - Argorate - 19-05-2009
Du Jquerry pour un truc aussi basique? ^^
Faut peut etre pas abusé là
pourquoi faire compliqué?
RE: [Résolu] Changement d'image au passage du curseur dessus - Sephi-Chan - 19-05-2009
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
RE: [Résolu] Changement d'image au passage du curseur dessus - Gabriel - 19-05-2009
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 !