- ベストアンサー
JavaScript初心者のための画像切り替え方法
- JavaScript初心者の方に向けて、画像切り替えの方法をご紹介します。
- HTMLタグとJavaScriptを使用して、マウスオーバーした際に画像を切り替える方法について解説します。
- 画像切り替えにはJavaScriptのonmouseoverイベントを利用し、複数の画像を順番に表示するように設定します。
- mouages
- お礼率65% (13/20)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんなのは？ ばぶ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <p><img src="0.jpg" alt="slide photo" id="slide"></p> <script type="text/javascript"> var F = null; document.getElementById('slide').onmouseover = function () { if (! F) changer(); }; document.getElementById('slide').onmouseout = function () { clearTimeout(F); F = null; }; function changer() { var t = document.getElementById('slide'); t.src = t.src.replace(/(\d+).jpg$/, (t.src.match(/(\d+)\.jpg$/)[1]-0+1)%10 + '.jpg'); F = setTimeout(changer, 1000); } </script>
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
…と、しまった。 ループする過程で 009.jpg から 001.jpg に戻す処理を忘れていました。 以下、#2を修正。 ------ <script type='text/javascript'> (function(){ var img = ["001.jpg","002.jpg","003.jpg","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg"]; var i = 0; var max = img.length-1; function changeImg(){ var test = document.getElementById('test'); test.src=img[i]; if(i < max){ i++; } else { i=0; } } function init(){ var test = document.getElementById('test'); var timerID; test.onmouseover = function(){ timerID = setInterval(changeImg,1000); }; test.onmouseout = function(){ clearInterval(timerID); }; } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script>
お礼
修正ありがとうございます。 こちらも参考にさせていただきます。 ありがとうございました！
- think49
- ベストアンサー率59% (285/482)
onmouseover, onmouseout は検索でHITすると思いますが、setInterval も組み合わせるので 初めて取り組むコードとしては難しい部類だと思います。 躓きそうだな、と感じる部分は「onmouseoutでclearIntervalする」ところ。 下記コードはFirefox3で動作確認しました。 -------- <script type='text/javascript'> (function(){ var img = ["001.jpg","002.jpg","003.jpg","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg"]; var i = 0; function changeImg(){ var test = document.getElementById('test'); test.src=img[i]; i++; } function init(){ var test = document.getElementById('test'); var timerID; test.onmouseover = function(){ timerID = setInterval(changeImg,1000); }; test.onmouseout = function(){ clearInterval(timerID); }; } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script> </head> <body> <div> <img id="test" src="001.jpg" /> </div> -------
お礼
勉強不足で自分が恥ずかしい限りです。 より勉強していきたいと思います
- masapiyochan
- ベストアンサー率46% (140/301)
>testimg-1.jpgから順に画像が入れ替わる これがいまいち不明です。 たとえば、testimg-1.jpgをオンマウスすると、 testimg-1.jpg~testimg-9.jpgの9枚の画像を全て、 順番にアニメーションのようにそれぞれ、 testimgon-1.jpg~testimgon-9.jpgにかえたいのか、 それとも、たとえば、testimg-1.jpgをオンマウスすると、 そのtestimg-1.jpgの画像を、testimg-1.jpg~testimg-9.jpgの順に、 アニメーションみたいに切り替えていきたいのか。 それともそういうのではないのか。まったくわかりませんが・・・。 どれにしても結構簡単に実現できそうです。
お礼
言葉足らずで申し訳ありませんでした。 回答していただきありがとうございました
補足
早速のご回答ありがとうございます。 私の言葉足らずで申し訳ございません。 後者の >testimg-1.jpgをオンマウスすると、 >そのtestimg-1.jpgの画像を、testimg-1.jpg~testimg-9.jpgの順に、 >アニメーションみたいに切り替えていきたいのか。 というように切り替えを行いたいのです。 元々testimg-1.jpg~testimg-9.jpgが存在しており、 オンマウスによって「パッパッ・・・」と9枚の画像を 表示させたいのです。 ん～、このような表現でおわかりになりますでしょうか？ すみません、言葉足らずで・・・。
お礼
お陰様で思い通りできました！ ありがとうございました。