- ベストアンサー
画像の表示方法について
ページが表示されるたびに画像を変更する方法が 『５・６年生にもわかるやさしいJavaScript』に紹介されていました。 URLはhttp://www.sky.sannet.ne.jp/masapine/java_top.htmlです。 これは、表示されるごとにランダムで変更する形式なのですが、 これを順番通りに画像を変更することは出来るのでしょうか。 具体的には、 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(5); simg[0]="○○○.gif"; simg[1]="●●●.gif"; simg[2]="△△△.gif"; simg[3]="▲▲▲.gif"; simg[4]="□□□.gif"; Myimg=Math.floor(5*Math.random()); document.write("<center><img src='"+simg[Myimg]+"'></center>"); //--> </SCRIPT> の、Myimg=Math.floor(5*Math.random());の部分で 表示方法を決めていると思いました。 simg[ ]の数字の順番通りに表示するには、 どのようにすればいいのでしょうか。 初心者なので詳しいことが分かりませんが、 よろしくお願い致します。 また、この形式通りでなくても構いません。
- kouji-y
- お礼率85% (6/7)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
再表示で順に変えるのは簡単にはできません。なぜなら一回前の状態を知ることが出来ないからです。 やるとすると、専用のボタンを作って、そのボタンを押すと切り替わるというのであれば可能です。再表示すると最初の状態に戻ってしまいますが。 それにしても「５・６年生にもわかる・・・」と名打つ以上、きっと説明は易しいのでしょうけど、初心者向けだからと言って、間違ったことを教えるのは良くないので、そのページは感心しませんね。 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の勉強の時にあえて非推奨を押して使うというのも余計なことです。
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
順番？ 利用者ごとなのか、サイトとしてなのかどっちでしょうか？？ ケース１（利用者ごと、cookieを利用すればいいかな） Aさんがアクセス→＃１の画像。 Bさんがアクセス→＃１の画像。 Bさんがアクセス→＃２の画像。 Bさんがアクセス→＃３の画像。 Aさんがアクセス→＃２の画像。 ケース２（サイトとして、Javascriptだけでは無理） Aさんがアクセス→＃１の画像。 Bさんがアクセス→＃２の画像。 Bさんがアクセス→＃３の画像。 さんがアクセス→＃４の画像。
補足
ご指摘いただきまして、ありがとう御座います。 私の考えでは、前者の利用者ごとに設定するというものです。 質問内容が不十分だったこと、お詫び申し上げます。
- auty
- ベストアンサー率58% (284/486)
・ 紹介されたページをそのまま利用してみました。 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"> <!-- body,tr,td {font-size:15px; color:#0099FF} --> </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- img=new Array(5); img[0]="<a href='http://www.sky.sannet.ne.jp/masapine/java_gazou4-1.html'><img border='0' src='http://www.sky.sannet.ne.jp/masapine/images/icons1.gif' width='32' height='32'></a>"; img[1]="<a href='http://www.sky.sannet.ne.jp/masapine/java_gazou4-2.html'><img border='0' src='http://www.sky.sannet.ne.jp/masapine/images/icons2.gif' width='32' height='32'></a>"; img[2]="<a href='http://www.sky.sannet.ne.jp/masapine/java_gazou4-3.html'><img border='0' src='http://www.sky.sannet.ne.jp/masapine/images/icons3.gif' width='32' height='32'></a>"; img[3]="<a href='http://www.sky.sannet.ne.jp/masapine/java_gazou4-4.html'><img border='0' src='http://www.sky.sannet.ne.jp/masapine/images/icons5.gif' width='32' height='32'></a>"; img[4]="<a href='http://www.sky.sannet.ne.jp/masapine/java_gazou4-5.html'><img border='0' src='http://www.sky.sannet.ne.jp/masapine/images/icons8.gif' width='32' height='32'></a>"; // imgNo=Math.floor(5*Math.random()); var imgNo = 0; function update() { document.getElementById("gazou").innerHTML = img[imgNo]; imgNo++; if (img.length<=imgNo) imgNo=0; } window.onload = update; //--> </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>
お礼
ご回答いただきまして、ありがとう御座います。 はい、分かりました。 また、そのページのソースを確認していなかった自分に気付かされました。 これからも勉強を頑張ります。
関連するQ&A
- 携帯サイト作成：TOPページの画像をアクセスの度に違う画像を表示するには？
すみません、どなたか教えてください。 携帯サイトを作成しております、 TOPページの画像をアクセスの度に違う画像を表示したいのですが、 こちらのサイトを見ながら http://www.sky.sannet.ne.jp/masapine/java_gazou4.html やってみました。 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(5); simg[0]="images/icons1.gif"; simg[1]="images/icons2.gif"; simg[2]="images/icons3.gif"; simg[3]="images/icons5.gif"; simg[4]="images/icons8.gif"; Myimg=Math.floor(5*Math.random()); document.write("<center><img src='"+simg[Myimg]+"'></center>"); //--> </SCRIPT> このソースをＢＯＤＹ区間に張り付ければできるのでしょうか、、 また、 images/icons1.gif この部分では、gif画像ファイルの位置などを記している様子がないのですが、このgif画像ファイルはどのフォルダに配置すればよいのでしょうか、、 すみません、どなたかわかるかたおりましたら、なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像がうまく表示されないのですが
ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ１ <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ２ <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ１はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか？ 表示されないとしたらどのようにしたら表示されるものなのでしょうか？ タグ２はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか？
- ベストアンサー
- JavaScript
- Javaspript画像にリンクが貼れない
Javaspript画像にリンクが貼れない Myimg=Math.floor(6*Math.random());という６種類の画像がランダムに表示されるジャバスクリプトを貼りました。 simg[0]="画像.jpg"; 画像にリンクをつけて、なおかつborder="0"にしたいのですが、できません。どうしたらいいでしょうか？
- ベストアンサー
- JavaScript
- swfobjectで表示させたswfをランダムに表示したい
swfobjectで表示させているswfを、 リロードするたびにswfファイルを読み込んでランダムに表示させたいと思います。 下記のswfをランダムに表示させるサンプルソースを流用して 使用しようとしたのですが、javascriptに詳しくないのでうまく行きません。 <embed>タグ、<object>タグを使わずに、swfobjectの書き方に合わせる記述のしかたを教えていただきたいです。 <script type="text/javascript"> <!-- simg=new Array(2); simg[0]="index"; simg[1]="index2"; Myimg=Math.floor(2*Math.random()); document.write("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.c... width='100%' height='100%'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='"+simg[Myimg]+".swf' /><param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /><param name='LOOP' value='false'><embed src='"+simg[Myimg]+".swf' quality='high' bgcolor='#ffffff' width='100%' height='100%' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' loop='false' /></embed></object>"); //--> </script>
- ベストアンサー
- JavaScript
- ランダムにswfを表示
こんにちは。カテゴリー違いかもしれませんが質問させていただきます。 下記スクリプトにてSWFファイルをランダム表示しています。 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(3); simg[0]="パス"; simg[1]="パス"; simg[2]="パス"; Myimg=Math.floor(3*Math.random()); document.write("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/...; width='230' height='149'><param name='allowScriptAccess' value='sameDomain'><param name='movie' value='"+simg[Myimg]+".swf'><param name='quality' value='high'><param name='bgcolor' value='#ffffff'><param name='LOOP' value='false'><embed src='"+simg[Myimg]+".swf' quality='high' bgcolor='#ffffff' width='230' height='149' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' loop='false'></embed></object>"); //--> </SCRIPT> firefox safariでは問題なく指定したサイズで表示されてますが、IE6で確認したところ、小さく表示されてしまいます。。 どなたか解決方法わかるかたおられましたら、ご教授お願い致します。
- 締切済み
- JavaScript
- Javascriptでランダムに画像を表示させ、さらにリンクさせる
当方、ホームページを作成していまして、 画像をランダムに表示させることはできたのですが、 さらにその画像をクリックにて違うページにリンクさせたいと考えております。 いろいろ検索してみたのですが、明確な回答が見つからなかったもので、、、 どなたかご回答いただけると、大変助かります。 どうぞよろしくお願いいたします。 現時点で、以下の様になっています。 （4枚の画像をランダム表示させ、リンク先は同じ場所を考えています） <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="0.gif"; ranimg[1]="1.gif"; ranimg[2]="2.gif"; ranimg[3]="3.gif"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>
- 締切済み
- JavaScript
- javascriptの下に空白ができる
いつもお世話になっております。 ランダムに画像が表示されるjavascriptを作っており、無事に表示はされるのですが、そのランダム画像の下にテーブルを配置し、別の画像（javascriptを使っていない固定画像）をぴったりくっつけたいのですが、3ピクセルくらいの空白ができてしまいます。 Opera、Firedoxでは空白ができず、IEでのみできます。 何が悪いのでしょうか？ 下記にタグを書かせていただきます。 <Script language="JavaScript"><!-- myImg = new Array() myImg[0] = "img1.jpg"; myImg[1] = "img2.jpg"; myImg[2] = "img3.jpg"; //--></Script> </HEAD> <BODY background="img/back.gif"> <SCRIPT language="JavaScript"><!-- i = Math.floor(Math.random()*);document.write("<img src="+myImg[i]+">");//--></SCRIPT> <table width="700" border="0"cellpadding="0" cellspacing="0"><th align="left" valign="top" scope="col"><img src="number1.gif" width="151" height="40" /> number1.gifがぴったりくっつけたい画像です。 以前FLASHを使用したページでも上記のようなことが起こり、教えて頂いて解決したので、（→ http://oshiete1.goo.ne.jp/qa4010291.html です。）同じようにやってみたのですが、ダメでした。 環境はWindows XP、使用ソフトはDreamweaver8です。 申し訳ありませんが、お助けいただけるとありがたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ランダム表示の画像位置
初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー7ライトを使い、 画像をランダムで変えたいと思って 調べてやってみたところ、以下の JavaScriptで一応は出来たんです。 <script language="JavaScript"> <!-- img = new Array img[0] = "gif/1.gif"; img[1] = "gif/2.gif"; img[2] = "gif/3.gif"; img[3] = "gif/4.gif"; img[4] = "gif/5.gif"; rnd = Math.floor(Math.random() * img.length); document.write("<img src='",img[rnd],"'>"); //--> </script> しかし、画像が一番左上に出てしまいます。 これを位置調整しようと思ったらどんな JavaScriptを使えばよろしいでしょうか？ 本当に申し訳ありませんが、回答の方を どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- Javascriptでランダムに画像を表示させる方法について
画像をランダムに表示させる為にalphaEDIT v2.0.3に以下のようなスクリプトを貼り付けました。 しかし表示させる画像の位置を動かすことができません。どうすればよいでしょうか？ グーグルやおしえてgooで検索しましたが、わかりませんでした。 どうかご教授おねがいします。m(_ _)m <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="test1.jpg"; ranimg[1]="test2.jpg"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>
- ベストアンサー
- HTML
- ライブラリにある画像をaction scriptから呼び出して表示する
action script初心者ですのでわかりやすく説明していただけると助かります。 今、test.flaというファイルがあり、その中にa.gif、b.gif、c.gifというファイルをライブラリに読み込んでいます。 ここで、カードというレイヤーを作り、そのアクションフレームに card1 = Math.floor(Math.random()*3) + 1; card2 = Math.floor(Math.random()*3) + 1; card3 = Math.floor(Math.random()*3) + 1; といれてランダムの１～３の数字を出しました。 この結果に基づいて、特定の座標に結果が１の場合a.gifを、 結果が２の場合はb.gifを、３の場合はc.gifを表示したいと 思います。 すでにレイヤー上に存在しているオブジェクトであれば、 位置情報をいれてそこに置くだけなのですが、なにぶんどの カードが表示されるか決められてないのでオブジェクトは レイヤー上においてありません。 ライブラリから呼び出して表示する命令はありますでしょうか？ 状況としてはトランプでシャッフルして最初の手札を配る時に どういう風にして表示したらよいかということになります。 考え方の間違いなどあるかもしれませんが、その点も指摘して いただいた上で解説していただけると助かります。 よろしくお願いします。
- ベストアンサー
- Flash
お礼
ご回答いただきまして、ありがとう御座います。 再表示で順に変える方法が難しいことがよく分かりました。 また、ボタンを押すごとに画像が切り替わるというJavaScriptをご紹介いただいて、ありがとう御座います。 ボタン以外にも、画像をクリックするたびに画像が変わるものもありますね。 更には、varをつけた方が正しいことも教えていただけて、たいへん勉強になりました。