こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

複数画像のロールオーバーの効率的な外部JS

複数の同じような画像を外部JSで、
効率的にロールオーバーさせる方法を教えて下さい。

複数のhtmlページのメニュー部分に使用しているので、
出来るだけhtmlソースを汚さずに、
外部のJSにまとめたいのです。
知っている方がいましたら、教えて下さい。

投稿日時 - 2007-04-24 14:52:52

QNo.2946688

困ってます

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

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">

アドバイス
一般人
自信なし

投稿日時 - 2007-04-30 17:16:32

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

たとえばこんな感じ。

ファイル名に法則性があるなら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}
}
}

投稿日時 - 2007-04-27 12:51:54

お礼

回答ありがとうございます。

試してみたのですが、

hoge1→hoge3over
hoge2→hoge3over
hoge3→hoge3over

の、様に、
一番最後のロールオーバーの設定しか
読み込んでくれないようなのですが・・・。

投稿日時 - 2007-04-29 14:22:07

ANo.1

>出来るだけhtmlソースを汚さずに、
>外部のJSにまとめたいのです。

極端に書けば、htmlの必要要素にidだけふってあれば、
jsのonload時にidごとにonmouseoverなどの設定はできると思います。
そうでなければonmouseoverをhtmlソース内に書き、
functionを外に出すようにしてください。

なおfunctionで出す場合は、引数にidを指定して、オブジェクトを
特定できるようにすると管理がしやすいでしょう。

投稿日時 - 2007-04-24 23:39:51

補足

回答ありがとうございます。

>jsのonload時にidごとにonmouseoverなどの設定はできると思います。
外部JSのソースはどんな感じになるかわかれば補足をお願いしたいのですが。

現在は、onmouseoverはhtml内に無いとうまくロールオーバーしてくれないので・・・。

投稿日時 - 2007-04-26 08:59:08

あなたにオススメの質問