- 締切済み
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…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- onomatori
- お礼率0% (0/4)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
ロールオーバーは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)
画像の先読みを念頭に入れて試しにこんなものを作ってみましたけれども。 マウスアウトで元画像へ戻るときにラグが起こりそうな気がして。 <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)
「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、という関係にあると仮定しています。
- babu_baboo
- ベストアンサー率51% (268/525)
それでは、ぼそっと。 つっこみどころまんさいしてあっぷ！ なんで５がないの？ きっとこれは、あとからりんくさきもせっとだったのですが！という？ ていじしたさんぷるをむししてます。 $(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>
