如何改变其他图像

我有两个形象的div在HTML中点击div的形象我想，onclik一个图像等图像应该改变如何改变其他图像

  <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>

我想上点击option_image_one应该改变image_one和imagetwo

来源

2012-04-17 Punhoon Khan

UPDATE

<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>

这里为我的作品

来源

2012-04-17 10:42:56 DonCallisto

我已经这样做了，但它没有工作 – 2012-04-17 11:02:21

@PunhoonKhan你把js放在哪里？ – DonCallisto 2012-04-17 12:03:33

我在脚本文本中加入了js身体 – 2012-04-18 05:39:11

最佳选择图像是给图片一些ID，然后像做document.getElementById('yourId').src='newimage'（这应该是分配给onClick事件上的第一个div一些js函数）

来源

2012-04-17 10:41:33 Gatekeeper

在哪里写的代码，你已经给ID – 2012-04-17 10:42:24

@PunhoonKhan后给予：看看我的答案 – DonCallisto 2012-04-17 10:43:48

@DonCallisto我在你编辑了，但它不会工作检查 – 2012-04-17 11:03:05

你可以尝试以下方法：

<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>

请注意，我已经为第二个image添加了一个ID。

见本interactive HTML/JS editor

来源

2012-04-17 10:42:38 Filype

我已经编辑质疑我想看看，然后告诉 – 2012-04-17 10:55:27

格是无用

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

来源

2012-04-17 10:43:53 jazzytomato

如果你可以用代码中的活生生的例子jQuery它会像这样：

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

使用jQuery通过在你的头下面的导入jQuery库：

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

来源

2012-04-17 10:46:55 gimg1

我已经编辑了问题，然后请求 – 2012-04-17 10:55:45

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

它的工作。

来源

2012-04-17 10:49:14 Donovant

根据托马斯和Filype的答案，我会建议使用div，但把onClick为img标签，而不是div标签。

这是为了将来的增强，所以如果你想添加其他任何东西到这些div。

来源

2012-04-17 12:06:33 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>

来源

2017-08-24 11:14:46 usman

它为什么工作？ OP出错了？ – Flummox 2017-08-24 11:33:46

这将是更好的解释你的解决方案，而不是只是抛出一个（到原来的代码）完全不相关的代码片段（它本身甚至不工作）。 – Stephan 2017-08-24 11:35:31

虽然此代码片段可能会解决问题，但它并不能解释为什么或如何回答问题。请[请提供您的代码解释]（// meta.stackexchange.com/q/114762/269535），因为这确实有助于提高帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 **举报人/评论者：** [仅限代码解答，例如downvote，请勿删除！]（// meta.stackoverflow.com/a/260413/2747593） – Patrick 2017-08-24 11:50:11

如何改变其他图像

回答

相关问题