1

我在 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 的图像

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>

请注意，我已将 ID 添加到第二个image.

查看此交互式 HTML/JS 编辑器上的实时示例

于 2012-04-17T10:42:38.577 回答
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 回答
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

根据 Thomas 和 Filype 的回答，我建议使用 div 但将 onClick 用于 img 标签而不是 div 标签。

这是为了将来的增强，以便如果您想向这些 div 添加任何其他内容。

于 2012-04-17T12:06:33.890 回答
-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-24T11:14:46.013 回答