Modifier une image au survole d'une autre
swadow
Messages postés
57
Statut
Membre
-
swadow -
swadow -
Bonjour, je voudrais savoir comment changer une image au survole d'une autre image car je suis en train de créer un site et je crois que sa pourrais faire un petit plus.
merci de vos réponses
merci de vos réponses
6 réponses
-
Un autre code éventuellement :
<script type="text/javascript"> function AFFICHE(image,id){ document.getElementById('toto_'+id).innerHTML = '<img src="'+image+'"/>'; } </script><img src="image1.png" onmouseover="javascript:AFFICHE('image2.png','1');" onmouseout="javascript:AFFICHE('image1.png','1');" /> <div id="toto_1"> <img src="image1.png" /> </div>
Le code affiche 2 images différentes et au survol de la première effectue un changement de la seconde (une sorte de "hover") dans le "div" correspondant puis ré-affiche l'image d'origine quand on quitte le "survol" de la première image.
Pour en afficher plusieurs, il faut changer le numéro dans la partie javascript:AFFICHE('image2.png','6') et idem pour la "div" <div id="toto_6">
Exemple :
<img src="line.png" onmouseover="javascript:AFFICHE('corners.png','1');" onmouseout="javascript:AFFICHE('line.png','1');" /> <div id="toto_1"> <img src="line.png" /> </div> <img src="line1.png" onmouseover="javascript:AFFICHE('corners1.png','2');" onmouseout="javascript:AFFICHE('line1.png','2');" /> <div id="toto_2"> <img src="line1.png" /> </div> -
Salut,
Il y a du choix ... au plus simple je dirais d'utiliser l'élément "hover" en CSS ou alors d'utiliser du Javascript.
-
oui mais sa modifierai l'image survolée moi je voudrais modifier une autre image !
-
Salut
Ton index (en gros ^^):<html> <head><title>Test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="img.js"></script> </head> <body> <img src="source1" alt="source1" title="source1" class="img" /> <img src="source2" alt="source2" title="source2" class="img" /> </body> </html>
img.jsjQuery(function($){ img.init(); } var img = { init: function(){ $(".img").click(function(){ $(".img").animate({"width" : "160px", "height" : "90px"}, 500); $(this).delay(500).animate({"width" : "320px", "height" : "180px"}, 500); }); } }
En gros un truc du genre, c'est un peu rapide mais après a toi de faire comme bon te semble !
j'ai utiliser jquery, pour plus d'info:
https://jquery.com/
J'ai pas tester mais comme je t'ai dis c'est juste un guide, si tu comprend pas ou qu'il y a une erreur n'hésite pas a reposter.
Bye
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Merci mais désolé j'ai pas tout compris au site et ton code ne marche pas bien...
-
