如何改變其他圖像

我有兩個形象的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

如何改變其他圖像

回答

相關問題