- 締切済み
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>
- imaffy
- お礼率75% (9/12)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
document.write('<a href="次の階層"><img src="'+ ranimg +'" border="0"></a>'); で良くない？ これで直ったらJavaScript云々より全てHTMLの問題ですね。
<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('<a href="次の階層"><img src="'+ ranimg +'"></a>'); // --> </script> これで良くない？
お礼
ランダム表示の画像にリンクできました。 ありがとうございます。 が、当方Macで作業していまして、 Safari,IEでは大丈夫なのですが、 FirefoxやCaminoだとトップページの画像に 青い淵が付いてしまいます。 これはブラウザ上の問題とかなのでしょうか？ もしご存知であれば、ご教授いただければ、 大変助かります。 よろしくお願い致します。
- VCAT
- ベストアンサー率20% (16/79)
（4枚の画像をランダム表示させ、リンク先は同じ場所を考えています） これはどういうことですか？矛盾しているような・・・
補足
ごめんなさい！！ 説明不足で分かりにくかったですね。 トップページには1枚の画像だけなのですが、 訪れるたびに違う画像が表示されるというもので、 その画像が計4種類あるということです。 そして、その画像をクリックすると次の階層に行く というふうにしたいのですが、、、
関連するQ&A
- 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
- ランダム表示の画像位置
初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー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
- 画像をランダムに表示するには
<script language=JavaScript> <!-- var img=new Array(); img[0]='画像1'; img[1]='画像2'; img[2]='画像3'; img[3]='画像4'; img[4]='画像5'; ran_gazo=Math.floor(img.length * Math.random()); document.write('<IMG SRC='+img[ran_gazo]+'>'); //--></script><!--scripted by shotyan@dreamcity--> というのを使いますよね？（あるサイトで見つけました）でも、画像があるべき場所に「×」がついて、画像が出ないんです・・ どうしたら画像がランダムに表示されるんでしょうか。 教えてください。 そして、その画像を右上に固定したいんです。 注文多くてごめんなさい。
- ベストアンサー
- JavaScript
- 画像をランダムに
JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか？
- ベストアンサー
- JavaScript
- 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法
今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。
- ベストアンサー
- HTML
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。
- ベストアンサー
- JavaScript
- javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!-- var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>
- 締切済み
- JavaScript
- 画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、img[2] の画像が表示された場合、jmp[2] ではなく ５つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- javascriptを使って画像のランダム表示とロールオーバーをセット
javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- 締切済み
- JavaScript
- javascriptで画像のランダム表示設定
いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 ３枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。
- ベストアンサー
- JavaScript
お礼
できました！！ ありがとうございます。