Question

我是HTML和javascript的新手。我需要有关javascript和HTML功能的帮助。我需要创建一个带有6个按钮的基本页面。单击时，每个按钮在浏览器中显示两个图像。下面的代码我有布局但是我无法弄清楚单击时显示图像的javascript函数。下面的两张图片是我想要显示的图像类型。按钮的代码可以让我了解我想要实现的目标。

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

这只是一个例子。我知道我需要为onclick事件创建一个函数，该函数将为每个按钮显示两个不同的图像。这是我需要帮助的。

即使存在用于显示图像的全局onclick事件也会很棒。

任何帮助都将不胜感激。

编辑：我有这个代码用一张图片做我想做的...我怎样才能在代码中得到两张图片？/？

<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

这应该有用..

<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 个答案: