comment changer l'image de la div sur cliquer sur l'image

J'ai deux images div en HTML, je veux que onclik d'une image à une autre image doit changer

         <div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
        <div class="alignment"><img src="pagetwo_graph_one.png"/></div>
        <div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
       <div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
        <div class="option_image"><img src="option1.png"/></div>
        <div class="option_image_label">Option 1</div>
        <div class="option_image_one"><img src="option1.png"/></div>

         <div class="option_image_label_one">Option 2</div>

Je veux que sur cliquez sur option_image_one il doit changer l'image de image_one et imagetwo

InformationsquelleAutor Punhoon Khan | 2012-04-17

html javascript

5

Mise à JOUR
```
<html>
 <head>
  <script type="text/javascript">
   function changeImage(){
    document.getElementById('toChange').src='3.jpg';
   }
  </script>
 </head>
 <body>
  <div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
  <div class="image_two"><img src="2.jpg" id="toChange"/></div>
 </body>
</html>
```
Voici le code qui fonctionne pour moi
- où avez-vous placé la js ?
- J'ai ajouté js dans le corps de texte du script
- poster du code, parce que dans mon navigateur qui fonctionne
- je coller tout le code, ou vous pouvez poster votre code html ici, alors je peut fonctionner sur mon navigateur et de voir
- merci cela a fonctionné pour moi, mais si j'ai à nouveau appuyer sur un autre bouton, ça ne marche pas
- Oui, c'est parce que le JS n'est associé qu'à une seule image. Si vous voulez l'associer à d'autres personnes, vous avez pour répondre à la première img structure
- je n'ai pas compris tout d'abord img structure moyenne
- Si vous souhaitez étendre le comportement de n'importe quelle autre image (cliquable pour le changement d'une autre img), vous devez adapter ce morceau de code --><img src="1.jpg" onclick="changeImage()"/> à d'autres images. J'espère que c'est clair maintenant 🙂
InformationsquelleAutor DonCallisto

onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "

Il serait de travailler.

InformationsquelleAutor Donovant

1

Meilleure option est de donner des images d'une pièce d'identité et de faire quelque chose comme document.getElementById('yourId').src='newimage' (il devrait y avoir une fonction js que vous attribuez à l'événement onClick sur votre première div)
- où écrire ce code qui vous avez donné après avoir id
- prendre un coup d'oeil à ma réponse
InformationsquelleAutor Gatekeeper

Vous pouvez essayer ce qui suit:

 <div class="option_image_one">
  <img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
 </div>
 <div class="image_two">
  <img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
 </div>

Noter que j'ai ajouté un ID à la deuxième image.

Voir l'exemple vivant sur cette interactif en HTML/JS éditeur

J'ai édité question de ce que je veux regarder ça et puis dire

InformationsquelleAutor Filype

div sont inutiles

<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>

InformationsquelleAutor jazzytomato

Si vous pouviez utiliser jQuery ce serait comme ça:

$(".option_image_one img").onclick(function(event) {
    $(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});

Utiliser jQuery importer la bibliothèque jQuery en incluant les éléments suivants dans votre en-tête:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

InformationsquelleAutor gimg1

0

Comme par Thomas et Filype réponses, je pense qu'utiliser des divs mais mettre onClick de la balise img et pas de balise div.

C'est pour la mise en valeur future de sorte que si vous voulez ajouter quelque chose à ces divs.

InformationsquelleAutor TechSpellBound

-1

complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>

Il serait préférable d'expliquer votre solution et de ne pas simplement jeter dans un (pour le code d'origine) complètement sans rapport avec l'extrait de code (ce qui en soi n'est pas le même travail).
Alors que ce bout de code peut résoudre le problème, ça n'explique pas pourquoi et comment il répond à la question. Veuillez inclure une explication de votre code, comme qui aide vraiment à améliorer la qualité de votre post. Rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre code suggestion. Marqueur / examinateurs: Pour le code-seulement des réponses comme celle-ci, downvote, ne le supprimez pas!

InformationsquelleAutor usman

Vous devez vous connecter pour publier un commentaire.