Sujet Précédent Sujet Suivant

Modifier une image au survole d'une autre

Fermé
swadow Messages postés 52 Date d'inscription mardi 1 mai 2012 Statut Membre Dernière intervention 20 mai 2014 - 3 sept. 2012 à 14:59
 swadow - 5 sept. 2012 à 18:06
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



A voir également:

6 réponses

Réponse 1 / 6
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
4 sept. 2012 à 09:26
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>
1
Réponse 2 / 6
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
3 sept. 2012 à 17:01
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.
0
Réponse 3 / 6
swadow Messages postés 52 Date d'inscription mardi 1 mai 2012 Statut Membre Dernière intervention 20 mai 2014
Modifié par swadow le 3/09/2012 à 17:31
oui mais sa modifierai l'image survolée moi je voudrais modifier une autre image !
0
Réponse 4 / 6
Elsyfiryos Messages postés 83 Date d'inscription dimanche 25 avril 2010 Statut Membre Dernière intervention 12 septembre 2012 11
3 sept. 2012 à 18:20
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.js 
jQuery(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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
swadow Messages postés 52 Date d'inscription mardi 1 mai 2012 Statut Membre Dernière intervention 20 mai 2014
4 sept. 2012 à 08:44
Merci mais désolé j'ai pas tout compris au site et ton code ne marche pas bien...
0
Réponse 6 / 6
swadow
5 sept. 2012 à 18:06
merci beaucoup ton code va très bien !!!
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses