Remplacer une image avec JQuery
gintoxic
Messages postés
566
Statut
Membre
-
gintoxic Messages postés 566 Statut Membre -
gintoxic Messages postés 566 Statut Membre -
bonjour, je voudrais savoir la méthode pour remplacer une image par une autre au survol de la souris
l'image de base est insérée en html, la seconde en css (background).
mon souci est que pour le moment l'image inséeée en html est au dessus de celle insérée en css et donc n'apparait pas.
j'ai donc fait un script en JQuery mais le souci là (et je ne l'avais pas stipulé avant) est que toutes les images de mon menu (menu-images) adopte la meme image... mais elle apparait bien comme il faut et disparait pareil...
je pose le hml
et le JQuery :
donc comment je peux faire pour que mon menu php s'associe avec Jquery ? svp
merci par avance
l'image de base est insérée en html, la seconde en css (background).
mon souci est que pour le moment l'image inséeée en html est au dessus de celle insérée en css et donc n'apparait pas.
j'ai donc fait un script en JQuery mais le souci là (et je ne l'avais pas stipulé avant) est que toutes les images de mon menu (menu-images) adopte la meme image... mais elle apparait bien comme il faut et disparait pareil...
je pose le hml
echo '<li id="item'.$num_item.'" class="item" style="opacity:0"><a href="index.php?titre='.$lib_theme.'"><img src="images/'.lcfirst($lib_theme).'.png" class="img" /></a></li>';
et le JQuery :
$('.img').mouseover(function(){
$(this).attr('src','images/mark_visible.png');
});
$('.img').mouseout(function(){
$(this).attr('src','images/mark.png');
});
donc comment je peux faire pour que mon menu php s'associe avec Jquery ? svp
merci par avance
A voir également:
- Remplacer une image avec JQuery
- Remplacer disque dur par ssd - Guide
- Légender une image - Guide
- Image iso - Guide
- Remplacer word - Guide
- Remplacer coco - Accueil - Réseaux sociaux
2 réponses
bon et bien j'ai trouvé un truc mais il est récurrent et rébarbatif = rééter le script pour chaque item
si vous pouviez me donner une méthode pour condenser le script, ce serait plus léger...merci par avance
html :
JQuery :
si vous pouviez me donner une méthode pour condenser le script, ce serait plus léger...merci par avance
html :
<img src="images/'.lcfirst($lib_theme).'.png" id="'.lcfirst($lib_theme).'" />
JQuery :
$('#mark').mouseover(function(){
$(this).attr('src','images/mark_visible.png');
});
$('#mark').mouseout(function(){
$(this).attr('src','images/mark.png');
});
Bonsoir,
Je te donne ma manière de procéder, qui n'est peut-être pas celle préconisée par les experts, mais au moins elle fonctionne !!
Et pas besoin de Javascript avec ma méthode :)
Tu mets une image transparente en background à tes li.
Et ensuite :
li:a {background-image: image en noir et blanc;}
li:hover {background-image : image en couleur; }
Okay ? Easy.
Allez bonne soirée ;)
Je te donne ma manière de procéder, qui n'est peut-être pas celle préconisée par les experts, mais au moins elle fonctionne !!
Et pas besoin de Javascript avec ma méthode :)
Tu mets une image transparente en background à tes li.
Et ensuite :
li:a {background-image: image en noir et blanc;}
li:hover {background-image : image en couleur; }
Okay ? Easy.
Allez bonne soirée ;)