表示画像の配列onclickのボタン

HTML：私はonclickの「MyFunctionのは、」今、私は画像をご希望のボタンを設定するには、onclickの表示画像の配列onclickのボタン

<body> 



<p>Click the button to see some images</p> 


<button onclick="myFunction()">See the Images!!!</button> 



<script src="js2/images.js"> 





</script> 

</body>

JSを表示する：私は上だ場合はわからない... onclickの画像を表示する必要性を私はJSでの初心者ですと右のトラックが...私は....

function myFunction() { 

pge = new Array() 

pge[4] = "../images/sky3.jpg" 


pge[3] = "../images/sky8.jpg" 

pge[2] = "../images/sky7.jpg" 

pge[5] = "../images/sky6.jpg" 

pge[0] = "../images/sky5.jpg" 

pge[1]= "../images/sky4.jpg" 

pge[6] = "../images/sky1.jpg" 

pge[7] = "../images/sky2.jpg" 




for (i=0;i<=pge.length-1;i++) { 


var img = document.createElement("img");

画像は、画像のみのsrc名を表示するために取得するように見えるカント????????あなたの中

} 


}

出典

2016-12-11 hendro3

追加ライン

img.setAttribute("src", pge[i]);

?????? part

出典

2016-12-11 15:49:06 Kenny

このようなことは、このトリックを行うべきです。（一部でHow to display image with javascript?に基づいて）

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Test</title> 
 
</head> 
 
<body> \t 
 
\t <p>Click the button to see some images</p> 
 

 
\t <button onclick="myFunction()">See the Images!!!</button> 
 

 
\t <script> 
 
\t \t function show_image(src, width, height, alt) { 
 
\t \t \t var img = document.createElement("img"); 
 
\t \t \t img.src = src; 
 
\t \t \t img.width = width; 
 
\t \t \t img.height = height; 
 
\t \t \t img.alt = alt; 
 

 
\t \t \t // This next line will just add it to the <body> tag 
 
\t \t \t document.body.appendChild(img); 
 
\t \t } 
 
\t 
 
\t \t function myFunction() { 
 
\t \t \t var pge = ["http://www.w3schools.com/graphics/pic_the_scream.jpg", "http://www.w3schools.com/images/colorpicker.gif"]; 
 

 
\t \t \t for(var i = 0; i < pge.length; i++){ 
 
\t \t \t \t show_image(pge[i], 100, 200, i) 
 
\t \t \t } 
 
\t \t }   
 
\t </script> 
 
</body> 
 
</html

出典

2016-12-11 15:57:31 Scalarr

ニース！だから私はw3schoolsからの画像を使用するときに動作しますが、自分のコンピュータ上のフォルダにある画像を使用しようとすると、画像は単に「alt」だけ表示されますか？私はsrcを変更する必要がありますか？ – hendro3

index.htmlがあなたのパスに関連するフォルダ/場所を使用します。 images/sky1.jpgの2つの例ではなく、配列の中に入れています。 [画像/ sky1.jpg]、[images/sky2.jpg]、[images/sky3.jpg]、...] – Scalarr

この回答があなたの問題を解決したかどうかを明記してください。 – Scalarr

あなたのHTMLは、ボタンがクリックされたときに画像を表示するための場所を必要とします。 CSSを使ってdivをスタイルすることができます。

<body> 
     <p>Click the button to see some images</p> 

     <button onclick="myFunction()">See the Images!!!</button> 

     <div id="showImg"></div>   

     <script src="js2/images.js"></script>  
</body>

Arrayコンストラクタを使用する必要はありません。以下のように配列にイメージを格納し、forループを使用して配列をループし、次にinnerHTMLプロパティを使用してimgタグを作成し、イメージを見つけて表示します。 CSSを使って画像をスタイルすることができます。

var pge = ["sky3.jpg", "sky8.jpg", "sky7.jpg", "sky6.jpg", "sky5.jpg", "sky4.jpg", "sky1.jpg", "sky2.jpg"]; 
var showImg = document.getElementById("showImg"); 

var myFunction = function(){ 
    for(var i = 0; i < pge.length; i++) 
    { 
     showImg.innerHTML = "<img src='images/" + pge[0] + "'/> <img src='images/" + pge[1] + "'/> <img src='images/" + pge[2] + "'/> <img src='images/" + pge[3] + "'/> <img src='images/" + pge[4] + "'/> <img src='images/" + pge[5] + "'/> <img src='images/" + pge[6] + "'/> <img src='images/" + pge[7] + "'/>"; 
    } 
}

出典

2016-12-11 19:12:33 dtdesign

表示画像の配列onclickのボタン

答えて

関連する問題