1

HTML に 2 つの画像 div があります。1 つの画像の 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 のイメージを変更する必要があります

4

8 に答える 8

5

アップデート

<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-17T10:42:56.450 に答える
2 
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "

それはうまくいくでしょう。

于 2012-04-17T10:49:14.580 に答える
1

最良のオプションは、画像にIDを付けてから、次のようなことを行うことですdocument.getElementById('yourId').src='newimage'（これは、最初のdivのonClickイベントに割り当てるjs関数である必要があります）

于 2012-04-17T10:41:33.840 に答える
0

次のことを試すことができます。

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

2番目にIDを追加したことに注意してくださいimage。

このインタラクティブなHTML/JSエディターのライブ例をご覧ください

于 2012-04-17T10:42:38.577 に答える
0

Thomas と Filype の回答によると、div を使用することをお勧めしますが、div タグではなく onClick を img タグに使用することをお勧めします。

これは、これらの div に何か他のものを追加したい場合に備えて、将来の拡張用です。

于 2012-04-17T12:06:33.890 に答える
0

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-17T10:46:55.277 に答える
0

divは役に立たない

<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
于 2012-04-17T10:43:53.147 に答える