0

HTMLとJavaScriptは初めてです。JavaScript と HTML の機能についてサポートが必要です。6 つのボタンを持つ基本的なページを作成する必要があります。各ボタンをクリックすると、ブラウザ内に 2 つの画像が表示されます。以下のコードにはレイアウトがありますが、クリックしたときに画像を表示する JavaScript 関数がわかりません。以下の 2 つの画像は、表示しようとしている画像のタイプです。ボタンのコードは、私が何を達成しようとしているのかを示しています。

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

これはほんの一例です。ボタンごとに 2 つの異なる画像を表示する onclick イベント用の関数を作成する必要があることはわかっています。これは私が助けを必要としているものです。

画像を表示するために使用されるグローバルな onclick イベントがある場合でも、それは素晴らしいことです。

どんな助けでも大歓迎です。

編集: 1 つの画像でやりたいことを行うためのこのコードがあります...どうすれば 2 つの画像をコードに入れることができますか???/?

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

2 に答える 2

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)" >
于 2013-10-11T13:08:52.183 に答える