- ベストアンサー
複数画像のロールオーバーの効率的な外部JS
複数の同じような画像を外部JSで、 効率的にロールオーバーさせる方法を教えて下さい。 複数のhtmlページのメニュー部分に使用しているので、 出来るだけhtmlソースを汚さずに、 外部のＪＳにまとめたいのです。 知っている方がいましたら、教えて下さい。
- ro911
- お礼率38% (21/55)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
document.onmouseover = function(ev){ var ev = (!ev) ? event : ev; var e = (ev.srcElement) ? ev.srcElement : ev.target; if(e.src){ e.src = (e.src.indexOf('menu') != -1) ? e.src.replace(/out/,'over') : e.src; } } document.onmouseout = function(ev){ var ev = (!ev) ? event : ev; var e = (ev.srcElement) ? ev.srcElement : ev.target; if(e.src){ e.src = (e.src.indexOf('menu') != -1) ? e.src.replace(/over/,'out') : e.src; } } <img src="menuout0.gif"> <img src="menuout1.gif"> <img src="menuout2.gif"> <img src="menuout3.gif"> <img src="menuout4.gif"> アドバイス 一般人 自信なし
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じ。 ファイル名に法則性があるならidの振り方を調整してもっとシンプルな 書き方もできると思います。 //html部分 <html> <head> <script type="text/javascript" src="include.js"></script> </head> <body> <img src="hoge1.jpg" id="id001"> <img src="hoge2.jpg" id="id002"> <img src="hoge3.jpg" id="id003"> </body> </html> //スクリプト部分 include.js window.onload=function(){ var imgs=new Object; imgs["001"]=new Object; imgs["001"]["obj"]=document.getElementById("id001"); imgs["001"]["org"]=new Image; imgs["001"]["org"].src="hoge1.jpg"; imgs["001"]["new"]=new Image; imgs["001"]["new"].src="hoge1over.jpg"; imgs["002"]=new Object; imgs["002"]["obj"]=document.getElementById("id002"); imgs["002"]["org"]=new Image; imgs["002"]["org"].src="hoge2.jpg"; imgs["002"]["new"]=new Image; imgs["002"]["new"].src="hoge2over.jpg"; imgs["003"]=new Object; imgs["003"]["obj"]=document.getElementById("id003"); imgs["003"]["org"]=new Image; imgs["003"]["org"].src="hoge3.jpg"; imgs["003"]["new"]=new Image; imgs["003"]["new"].src="hoge3over.jpg"; for(var i in imgs){ imgs[i]["obj"].onmouseover=function(){this.src=imgs[i]["new"].src} imgs[i]["obj"].onmouseout =function(){this.src=imgs[i]["org"].src} } }
- yambejp
- ベストアンサー率51% (3827/7415)
＞出来るだけhtmlソースを汚さずに、 ＞外部のＪＳにまとめたいのです。 極端に書けば、htmlの必要要素にidだけふってあれば、 jsのonload時にidごとにonmouseoverなどの設定はできると思います。 そうでなければonmouseoverをhtmlソース内に書き、 functionを外に出すようにしてください。 なおfunctionで出す場合は、引数にidを指定して、オブジェクトを 特定できるようにすると管理がしやすいでしょう。
補足
回答ありがとうございます。 ＞jsのonload時にidごとにonmouseoverなどの設定はできると思います。 外部JSのソースはどんな感じになるかわかれば補足をお願いしたいのですが。 現在は、onmouseoverはhtml内に無いとうまくロールオーバーしてくれないので・・・。
お礼
回答ありがとうございます。 試してみたのですが、 hoge1→hoge3over hoge2→hoge3over hoge3→hoge3over の、様に、 一番最後のロールオーバーの設定しか 読み込んでくれないようなのですが・・・。