ベストアンサー

画像の表示方法について

2008/05/17 15:36

ページが表示されるたびに画像を変更する方法が『５・６年生にもわかるやさしいJavaScript』に紹介されていました。 URLはhttp://www.sky.sannet.ne.jp/masapine/java_top.htmlです。これは、表示されるごとにランダムで変更する形式なのですが、これを順番通りに画像を変更することは出来るのでしょうか。具体的には、 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> の、Myimg=Math.floor(5*Math.random());の部分で表示方法を決めていると思いました。 simg[ ]の数字の順番通りに表示するには、どのようにすればいいのでしょうか。初心者なので詳しいことが分かりませんが、よろしくお願い致します。また、この形式通りでなくても構いません。

kouji-y
お礼率85% (6/7)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

notnot
ベストアンサー率47% (4900/10358)

2008/05/17 16:35 回答No.2

再表示で順に変えるのは簡単にはできません。なぜなら一回前の状態を知ることが出来ないからです。やるとすると、専用のボタンを作って、そのボタンを押すと切り替わるというのであれば可能です。再表示すると最初の状態に戻ってしまいますが。それにしても「５・６年生にもわかる・・・」と名打つ以上、きっと説明は易しいのでしょうけど、初心者向けだからと言って、間違ったことを教えるのは良くないので、そのページは感心しませんね。 var simg=new Array(5); simg[0]="○○○.gif"; simg[1]="●●●.gif"; simg[2]="△△△.gif"; simg[3]="▲▲▲.gif"; simg[4]="□□□.gif"; var Myimg=Math.floor(5*Math.random()); document.write("<center><img src='"+simg[Myimg]+"'></center>"); が正しいです。var を付けなくても一応動きますが、間違いです。また、<center>タグは非推奨で、JavaScriptの勉強の時にあえて非推奨を押して使うというのも余計なことです。

質問者

お礼 2008/05/17 18:33

ご回答いただきまして、ありがとう御座います。再表示で順に変える方法が難しいことがよく分かりました。また、ボタンを押すごとに画像が切り替わるというJavaScriptをご紹介いただいて、ありがとう御座います。ボタン以外にも、画像をクリックするたびに画像が変わるものもありますね。更には、varをつけた方が正しいことも教えていただけて、たいへん勉強になりました。

その他の回答 (2)

steel_gray
ベストアンサー率66% (1052/1578)

2008/05/17 16:39 回答No.3

順番？　利用者ごとなのか、サイトとしてなのかどっちでしょうか？？ケース１（利用者ごと、cookieを利用すればいいかな） Aさんがアクセス→＃１の画像。 Bさんがアクセス→＃１の画像。 Bさんがアクセス→＃２の画像。 Bさんがアクセス→＃３の画像。 Aさんがアクセス→＃２の画像。ケース２（サイトとして、Javascriptだけでは無理） Aさんがアクセス→＃１の画像。 Bさんがアクセス→＃２の画像。 Bさんがアクセス→＃３の画像。さんがアクセス→＃４の画像。

質問者

補足 2008/05/17 18:33

ご指摘いただきまして、ありがとう御座います。私の考えでは、前者の利用者ごとに設定するというものです。質問内容が不十分だったこと、お詫び申し上げます。

auty
ベストアンサー率58% (284/486)

2008/05/17 16:15 回答No.1

・　紹介されたページをそのまま利用してみました。 document.getElementById("gazou").innerHTML = img[imgNo]; を中心に勉強してみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <META NAME="robots" CONTENT="noindex,nofollow"> <title>ページが表示されるたびに表示する画像がかわります（リンク付き） - ５・６年生にもわかるやさしいJavaScript</title> <STYLE TYPE="text/css">  </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body bgcolor="#F0F8FF"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td align="center" height="20">表示の例</td> </tr> <tr> <td align="center" height="120">  <div align="center"> <table border="0" cellspacing="0" bgcolor="#6699FF"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" width="350" height="100"> <tr> <td id="gazou" align="center"> </td> </tr> </table> </td> </tr> </table> </div>  </td> </tr> <tr> <td align="center" height="30"><font color="#666666">↑画像をクリックするとリンクします↑</font></td> </tr> <tr> <td align="center" height="40"><FORM><INPUT type="button" value="順に表示ボタン" onClick="update()" title="このページを更新します" style="border-style:solid; border-width:1px; border-color:#6699FF; background:#FFFFFF; font-size:10pt; color:#666666; cursor:hand"></FORM></td> </tr> <tr> <td align="center" height="40"><FORM><INPUT type="button" value="CLOSE" onClick="window.close()" title="このウインドウを閉じます" style="border-style:solid; border-width:1px; border-color:#6699FF; background:#FFFFFF; font-size:10pt; color:#666666; cursor:hand"></FORM></td> </tr> </table> </center> </div> </body> </html>