单击时并排显示两个图像的按钮

Question

Im very new to HTML and javascript. 我对HTML和javascript非常陌生。 I need help with a javascript and HTML function. 我需要有关javascript和HTML函数的帮助。 I need to create a basic page with 6 buttons. 我需要创建一个包含6个按钮的基本页面。 Each button when clicked displays two images within the browser. 单击每个按钮都会在浏览器中显示两个图像。 The code below I have the layout however I cannot figure out the javascript function to display the images when clicked. 下面的代码具有布局，但是单击时我无法弄清楚显示图像的JavaScript函数。 The two images below are the type of images I'm trying to display. 下面的两个图像是我要显示的图像类型。 And the code for the buttons gives an idea of what I'm trying to achieve. 按钮的代码给出了我要实现的目标的想法。

<img src="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath=\Metropolitan\MRMETRO-1458.jpg&amp;-1918551107" id="page_0_content_2_imgWC" class="cam" alt="">
<a href="http://imgur.com/GnzZKDA"><img src="http://i.imgur.com/GnzZKDA.png" title="" /></a>

</center>

<center>
<body>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera One</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Two</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Three</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Four</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Five</button>
<button onclick="display images "http.example.jpg" + "http.example2.jpg">Camera Six</button>
</body>
</center>

This is just an example. 这只是一个例子。 I know I need to create a function for the onclick event that will display two different images for each button. 我知道我需要为onclick事件创建一个函数，该函数将为每个按钮显示两个不同的图像。 This is what I need help with. 这是我需要帮助的。

Even if there is an onclick event that is global that is used to display images would be great. 即使有一个用于显示图像的全局onclick事件也很好。

Any help would be appreciated. 任何帮助，将不胜感激。

EDIT: I have this code to do what I wish with one image...How can I get two images into the code???/? 编辑：我有此代码做我希望与一个图像...如何将两个图像放入代码??? /？

<style type="text/css"> 
img{width:300px;height:250px;border:0;} 
.show{display:block;}
.hide{display:none;}
</style> 
<script type="text/javascript">
function showImg()
{
   var obj=document.getElementById('image01');
   obj.className = 'show';
}
</script>
</head> 

<html> 
<body> 

<img id="image01" src="http://i.imgur.com/GnzZKDA.png" class="hide"> 
<br/> 
<input type="button" onclick = "showImg()" value= "Show image"> 
</html>

Answer 1

this should work.. 这应该工作..

<script type="text/javascript">
var imgs = [
 // do not change this...... arrays index start at 0.. 
  [], 
  // write your img url below... like this...
["http://i.imgur.com/GnzZKDA.png" , "http://i.imgur.com/GnzZKDA.png" ],
 ["" , "" ],
  ["" , "" ],
  ["" , "" ],
  ["" , "" ],
  ["" , "" ]
  ];

function showImg (imgIndex) {
  document.getElementById('img1').src = imgs[imgIndex][0] ;
  document.getElementById('img2').src = imgs[imgIndex][1] ;
  }
</script>

<style type="text/css"> 
img{width:300px;height:250px;border:0;} 

</style>

<img id="img1" src="" >
  <img id="img2" src=""  >

<br>

<input type="button" value="Camera One" onclick="showImg(1)" >
  <input type="button" value="Camera Two" onclick="showImg(2)" >
  <input type="button" value="Camera Three" onclick="showImg(3)" >
  <input type="button" value="Camera Four" onclick="showImg(4)" >
  <input type="button" value="Camera Five" onclick="showImg(5)" >
  <input type="button" value="Camera Six" onclick="showImg(6)" >

Answer 2

<script>
    $(document).ready(function(){
        $("#btn2").click(function(){
            var rel=$("#bigImg").attr('rel');

            var actualrel=parseInt (rel);
            if (actualrel<4) {
                bigImg=actualrel+1;
                }
                else{
                    bigImg=1;   
            }
            $("#bigImg").attr("rel",bigImg);

            rel="#"+rel;
            var src1=$(rel).attr("src");
            $("#bigImg").attr("src",src1);
        });
    });


    $(document).ready(function(){
        $("#btn1").click(function(){
            var rel=$("#bigImg").attr('rel');
            var actualrel= parseInt(rel)
            if (actualrel<4){
                bigImg=5-actualrel;
            }
            else{
                bigImg=1;
            }
            $("#bigImg").attr("rel",bigImg);

            rel="#"+rel;

            var src1=$(rel).attr("src");
            $("#bigImg").attr("src",src1);
        });
    });


</script>

单击时并排显示两个图像的按钮

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-10-11 13:08:52

解决方案2
0 2016-11-18 10:28:06

单击时并排显示两个图像的按钮

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-10-11 13:08:52

解决方案2 0 2016-11-18 10:28:06

解决方案1
1 已采纳 2013-10-11 13:08:52

解决方案2
0 2016-11-18 10:28:06