- ベストアンサー
画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- yskeoi
- お礼率36% (9/25)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> <A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A> できるよ でも <A href> より <A onClick> の方が楽かも。 >thisが入っているのもよくわかっていません http://www.tohoho-web.com/java/variable.htm this → これ 通常「自身」と言われる。 呼ばれたオブジェクト(この場合タグ)ごと持って居るのがこのthis dispの受け取りはimgという限定をしているのでaタグから呼ぶとthisがaになってしまうのでつじつまが合わず動作しない。 imgから呼ぶとthisがimgとなるので動作する。 aから呼ぶには意図的に内包するimgを抜き出さなければならない。 http://www.tohoho-web.com/js/image.htm#images
その他の回答 (5)
お取り込み中すみませんが、変更される画像が1つなら最初にその画像を割り出しておけば良いじゃないですか？ 例えば沢山ある画像の中から'001.jpg'を含む画像を常に変更するようにしたら下のようになりますよ。 たぶんね。 <html> <head> <title>img</title> <script> imgs=[ "image/001.jpg", "image/002.jpg", "image/003.jpg", "image/004.jpg", "image/005.jpg" ] window.onload = function(){ for (var i = 0; i < document.images.length; i++){ if(document.images[i].src.indexOf('001.jpg') != -1){ randimg = document.images[i] } } } function disp(){ randimg.src=imgs[Math.round(Math.random()*(imgs.length-1))]; alert('id=' + randimg.id + 'src=' + randimg.src) } </script> </head> <body> <div align="center"> <!--a hrefで変更--> <a href="javascript:disp()"><img src="image/0.jpg" border="0" id="ss0"></a> <!--a onclickで変更--> <a href="#" onclick="disp();return false"><img src="image/0.jpg" border="0" id="ss1"></a> <!--img onclickで変更--> <img src="image/001.jpg" border="0" onclick="disp()"><!--変更される画像--> </div> </body> </html>
補足
indexOfを使うという手もあるのですね。 勉強になりました。 どうもありがとうございます。
<a href="javascript:disp(this.images[0])"> で元のまま動くのでは？
補足
<a href="javascript:disp(this.images[0])"> でも、 <a href="javascript:disp(this.imgs[0])"> でも、動かないよ。 もう少し自分で勉強してみます。 どうもありがとうございます。
> if(imgRandom == 0) document.AAA.src="image/001.jpg"; 確認してないけど それで動くんじゃないのかな。 >href="javascript:imgRandom()" href="javascript:disp(document.AAA)" こうしたら前のまま使えるんじゃない？
補足
>href="javascript:disp(document.AAA)" で動きました。 だいぶ理解が深まってきました。 ありがとうございます。 ちなみに、name、idを与えない場合はonclickを使うしかないということでしょうか？ ↓document.imgs[i].srcがダメで動いていないのですが。 そういうことですよね？ <SCRIPT language="JavaScript"> <!-- var imgs = new Array; var n = 3; var i; for(i=0;i<n;i++){imgs[i] = new Image();} imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; function disp(){ document.imgs[i].src=imgs[Math.round(Math.random()*(n-1))].src; } // --> </SCRIPT> </head> <body> <A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A> </body>
> A href=を使って <a style="cursor:pointer"><img /></a> 何故試してみないの？
補足
下にもかいたのですが、ポインタを変えるのはできたのです。 <A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A> ↑みたいなことができないのかと思っているのですが、、。 おとといからweb製作を始めた素人なのですがアドバイスいただけますか？ function disp(img)なのに、onclick="disp(this)"で、 ()のなかにthisが入っているのもよくわかっていません。 よろしくお願いします。
<img style="cursor:pointer" /> http://www.tohoho-web.com/css/reference.htm#cursor
補足
saykaさんありがとうございます。 <img src="image/001.jpg" border="0" onclick="disp(this)" style="cursor: pointer;"> でできたのですが、 onclickではなく、A href=を使って同じようなscriptをつくることはできますでしょうか？
補足
なんとなくわかったような、、わからないような、、 すっきりしない状態なのですが、 ↓で、一応できたのですが、前のときに比べると全然違ったものに見えます。 <A href>を使うとこのようになるものなのですか？ <SCRIPT language="JavaScript"> <!-- function imgRandom(){ var imgMax = 3; var imgRandom = Math.floor(Math.random() * imgMax); if(imgRandom == 0) document.AAA.src="image/001.jpg"; else if(imgRandom == 1) document.AAA.src="image/002.jpg"; else if(imgRandom == 2) document.AAA.src="image/003.jpg"; } // --> </SCRIPT> </head> <body> <A href="javascript:imgRandom()"><IMG src="image/001.jpg" name="AAA" id="AAA" border="0"></A> </body>