• 締切済み

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…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

みんなの回答

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

ロールオーバーはCSSに任せてみてはどうでしょう？ (全角空白は半角空白に置換してください) ------------- <style type="text/css"> #Test{ 　display: block; 　text-indent: -9999px; 　background-color: white; 　background-image: none; 　background-position: top left; 　width: 100px; 　height: 100px; } #Test:hover { 　background-position: top 100px; } </style> <script type="text/javascript"> //<![CDATA[ window./*@cc_on @if(@_jscript_version <= 5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'load', function (event) { 　document.getElementById('Test').style.backgroundImage = 'url(top' + Math.floor(Math.random()*6) + '.gif)'; // top0.gif ～ top5.gif },false); //]]> </script> </head> <body> <p><span id="Test">Test</span></p> ------------- top.gif は 100*100px画像を横に連結した画像(100*200px)としています。 画像は縦に連結しても、縦にしても構いません。 ロールオーバーリンク６ ～CSSテクニック～ http://www.stylish-style.com/csstec/basic/l-rollover6.html

  • zeff
  • ベストアンサー率69% (137/198)
回答No.3

画像の先読みを念頭に入れて試しにこんなものを作ってみましたけれども。 マウスアウトで元画像へ戻るときにラグが起こりそうな気がして。 <script type="text/javascript"> <!-- var aMyImg = new Array( "top1.gif", "top2.gif", "top3.gif", "top4.gif", "top6.gif" ); var aRollImg = new Array( "top1roll.gif", "top2roll.gif", "top3roll.gif", "top4roll.gif", "top6roll.gif" ); function randomImage(){ /* 画像先読み処理ここから */ /*元画像*/ var aDefImg = new Array(); if(!aMyImg){ return false; } aDefImg = preLoadImg(aMyImg); /*ロールオーバー画像*/ var aMoverImg = new Array(); if(!aRollImg){ return false; } aMoverImg = preLoadImg(aRollImg); /* 画像先読み処理ここまで */ /*ランダム*/ var n = Math.floor(Math.random()*aDefImg.length); /*targetの画像をチェンジ*/ var tImg = document.getElementById('myimage'); if( !tImg ){ return false; } tImg.src = aDefImg[n].src; /*onMouseOver*/ tImg.onmouseover = function(){ tImg.src = aMoverImg[n].src; } /*onMouseOut*/ tImg.onmouseout = function (){ tImg.src = aDefImg[n].src; } } /* 画像先読み処理関数 */ function preLoadImg(aImg){ var aPreImg = new Array(aImg.length); for (var i=0; i < aImg.length; i++ ){ aPreImg[i] = new Image(); aPreImg[i].src = aImg[i]; } return aPreImg; } window.onload = randomImage; //--> </script> </head> <body> <img id="myimage" src="top1.gif" alt="画像" width="100" height="100"> </body> </html>

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

「document.write」って好きになれないんだけど、どうせ書くのならベタに書き出したほうが良い（？） <script type="text/javascript"> <!-- (function() { var imgs = ["top1","top2","top3","top4","top6"]; // ↑画像ファイル名（マウスオン時は「上記+roll.gif」を表示） var img = imgs[Math.floor(Math.random()*imgs.length)]; var htm = '<img border="0" src="' + img; htm += '.gif" onmouseover="this.src=\'' + img; htm += 'roll.gif\'" onmouseout="this.src=\'' + img; htm += '.gif\'">'; document.write(htm); })(); //--> </script> ＊○○.gif　←→　○○roll.gif、という関係にあると仮定しています。

回答No.1

それでは、ぼそっと。 つっこみどころまんさいしてあっぷ！ なんで５がないの？ きっとこれは、あとからりんくさきもせっとだったのですが！という？ ていじしたさんぷるをむししてます。 $(5)のすうじは、がぞう０から４までをいみします。 そうそう、がぞうのなまえは、０からはじめてるよ <script type="text/javascript"><!-- document.write(( '<img src="./img/top$(5).gif" alt="image" width="100" height="100" \n' + 'onmouseover="this.src = this.src.replace(/(\\d+).*?(\\.gif)$/, \'$1roll$2\')"\n' + 'onmouseout="this.src = this.src.replace(/(\\d+)roll(\\.gif)$/, \'$1$2\')">\n' ).replace(/\$\((\d+)\)/g,function (a,n){ return +n * Math.random()|0})); //--> </script>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • かぶらないランダム画像

    こんにちは。 現在ランダムに画像表示＋画像毎に各リンク＋マウスオーバーで画像切り替え　を下記スクリプトで行っております。 function randomImage1() { img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; n = Math.floor(Math.random()*2); url = 'URL1 URL2'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[n-0+2]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } ここで相談です。さらにこのソースを改造して 重複しないでランダムに画像表示させたいのですが、 どこをどう改造すれば良いかアドバイス宜しくお願い致します。

  • 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

    今ＨＰを作成しているんですが、題名の方法が知りたいです。 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
  • 画像サイズを指定する

    1～6まで全て同じサイズ（200*100）の画像があります。 この画像を下記のスクリプトを使用してランダムに表示させ、 マウスを重ねるとその画像に対応した画像に切り替わる （画像1なら画像4という風に） ということをしているんですが、 表示サイズを300*150で表示させるためには どうしたらいいのでしょうか？ <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "画像1.gif"; img[1] = "画像2.gif"; img[2] = "画像3.gif"; img[3] = "画像4.gif"; img[4] = "画像5.gif"; img[5] = "画像6.gif"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> 基本的なことで申し訳ありません。 どなたかわかる方がいらっしゃれば宜しくお願い致します。

  • ランダム画像 & マウスオーバー画像切り替え &

    こんにちは。 どうしてもわからない事がありますので質問させて下さい。 下記ソースにてランダム画像切り替えとマウスオーバーにて画像変更を行ってます。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> さらにマウスオーバー時の画像それぞれ個別にリンクを張り さらにそれをインラインフレーム内で表示するのでtarget="_top"の値を付け加えたいです。 そのような事が可能であれば是非ご教授頂ければありがたいです。 みなさま、よろしくお願い致します。

  • ロールオーバーが表示されない

    ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <img src="★" border="0" onmouseover="this.src='●'" onmouseout="this.src='■'"> ★最初に表示される画像のファイル ●オンマウスで表示される画像のファイル ■マウスをはずしたとき表示される画像のファイル 【私が入力したタグ（？？のところにココログのアドレスが入ります】 <IMG src="http://？？.cocolog-nifty.com/images/★のファイル.gif" onmouseover="this.src='http://？？.cocolog-nifty.com/images/●のファイル.gif'" onmouseout="this.src='http://？？.cocolog-nifty.com/m/images/■のファイル.gif'"> 【トラブルの現象】 １）1枚だけ表示されマウスを持っていくと×印になり二度と表示されません。 ２）HTMLの編集欄にタグを貼り付け保存→記事の作成で確認→htmlの編集欄に戻ると、タグの順番が逆になる（↓このようになる） <p><img onmouseover="this.src='●'" onmouseout="this.src='■'" src="★" border="0" /></p> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。

  • ランダム表示の画像位置

    初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー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でランダムに画像を表示させ、さらにリンクさせる

    当方、ホームページを作成していまして、 画像をランダムに表示させることはできたのですが、 さらにその画像をクリックにて違うページにリンクさせたいと考えております。 いろいろ検索してみたのですが、明確な回答が見つからなかったもので、、、 どなたかご回答いただけると、大変助かります。 どうぞよろしくお願いいたします。 現時点で、以下の様になっています。 （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>

  • ランダム画像＆マウスオーバーで画像切り替え

    こんばんは。 下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> どなたかご教授頂けると助かります。 よろしくおねがいいたします。

  • 画像をランダムに

    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> とタグをうっているのですが、なにか足りないところがあるのでしょうか？

  • マウスが離れたら元々表示されていた画像に戻したい

    次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div>　　　を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div>　　のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する