單擊時並排顯示兩個圖像的按鈕

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 個解決方案

解決方案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