onmouseで画像の切り替えについて

2023/10/15 14:17

このQ&Aのポイント

画像をランダムに読み込み、マウスが重なると明るさが変化する方法について質問です。
外部JSファイルを使用してランダムな画像を表示し、マウスホバー時に画像の明るさを変えたいです。
具体的な方法がわからず困っています。アドバイスをお願いします。

ベストアンサー

onmouseで画像の切り替えについて

2008/06/05 12:56

こんにちは。画像切り替えについて質問があります。内容は画像をランダムで読み込んで更にマウスが重なるとその画像がちょびっと暗くなったり明るくなったりしたいです。ソースは・・・・ html側 <script type="text/javascript">document.write(randomImage1());</script>を任意の場所に埋め込んで外部JSファイル function randomImage1() { 　　var imageList = [ '1.jpg', '2.jpg', '3.jpg']; 　　var n = Math.floor(Math.random() * imageList.length); 　　return '<img src="' + imageList[n] + '" alt="">'; } ていう感じに書いております。どこをどういじればいいかわからず困ってます・・・みなさんのアドバイスを頂ければ幸いです。

19780405
お礼率58% (14/24)

JavaScript
回答数1
ありがとう数0

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

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/06/06 12:41 回答No.1

手っ取り早いのはブラウザにあるフィルター機能をつかうこと。ただしブラウザ依存のため、使えないブラウザをきりすてるかブラウザごとに細かい設定をする必要があります。ちゃんとやるなら、ランダムな画像それぞれに、明るい画像と暗い画像を用意しておいて、名前をキーにonmouseoverで切り替えてやることですね。

関連するQ&A

javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、各画像にリンク設定したいのと、各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> </script> </body> </html>
- 締切済み
- JavaScript
ランダム画像＆マウスオーバーで画像切り替え
こんばんは。下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript">  </script> どなたかご教授頂けると助かります。よろしくおねがいいたします。
- ベストアンサー
- JavaScript
ランダム画像 & マウスオーバー画像切り替え &
こんにちは。どうしてもわからない事がありますので質問させて下さい。下記ソースにてランダム画像切り替えとマウスオーバーにて画像変更を行ってます。 <script language="javascript">  </script> さらにマウスオーバー時の画像それぞれ個別にリンクを張りさらにそれをインラインフレーム内で表示するのでtarget="_top"の値を付け加えたいです。そのような事が可能であれば是非ご教授頂ければありがたいです。みなさま、よろしくお願い致します。
- ベストアンサー
- JavaScript
画像をランダムに
JavaScript初心者です。回答していただければさいわいです。初心者といってもタグサイトからコピペしていじくるだけの者ですが。画像をランダムに表示したいと思いJavaScriptを使用したのですがうまく表示させることができません。画像自体表示していないことになってしまいます。画像を表示させたい部分に <SCRIPT language="JavaScript">  </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか？
- ベストアンサー
- JavaScript
javascript 画像切り替え　ランダム　順番
インラインフレーム内のランダムな画像切り替えはできたのですが、順番に切り替えていくというのが出来ません。。。ランダムソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=Math.floor((Math.random()*100))%imglist.length; var output="<IMG src=images/randomimg/"+imglist[selectnum]+">" ; document.write(output); 順番ソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=imglist.length-1; var i=0; function forward() { i=selectnum--; var output="<IMG src=images/randomimg/"+imglist[i]+">" ; document.write(output); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。どなたか解決方法よろしくお願いします。
- ベストアンサー
- JavaScript
javascriptで画像表示変更が出来ない
ＨＴＭＬページで、javascriptを使ってそのページにアクセスするたびに、画像が変更させているのですが、ときどき画像が表示されません。ソースは下記です。画像が落ちないようにする方法はないのでしょうか？宜しくお願いします。 <script type="text/javascript"></script>
- 締切済み
- JavaScript
jqueryのスライドショー。htmlに画像1枚で
jquery-1.5.1.min.jsを使ってjpg画像をランダムにスライドショーさせるプログラムで、下記ポイントを満たしたプログラムへ変えたいです。・scriptが機能しない場合には画像がちゃんと表示される・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】）・修正するコードは【画像1枚バージョン】よろしくお願いします。【画像1枚バージョン】 <script type="text/javascript"> $(function(){ 　var elm = $(".fadein"); 　elm.children("img").hide(); 　(function(){ 　　var img = elm.children("img:hidden"); 　　elm.children("img:not(hidden)").fadeOut(1000); 　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500); 　　var id = setTimeout(arguments.callee, 5000);　　　})(); }); </script> <div class="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> 【画像多いバージョン】 <script type="text/javascript"> imgLength = 20; firstInt = 1; imgChangeSpeed = 5000; imgExtension = ".jpg"; imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ var t = setInterval(loadImg, imgChangeSpeed); function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } }); </script> <div id="gallery"> <img src="img/1.jpg" /> </div>
- ベストアンサー
- JavaScript
画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>
- ベストアンサー
- JavaScript
html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript