• ベストアンサー
  • 困ってます

FirefoxでonMouseOver/Outの動作がされません。。。

  • 質問No.4497701
  • 閲覧数671
  • ありがとう数3
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 100% (1/1)

全くの初心者で恐縮ですが、どうしても判らなかったので投稿させていただきます。

onMouseOver/Outで画像を変化させるごく一般的なスクリプトを使用したいのですが、外部jsファイルから読み込ませるとどうしてもFirefoxで動作されません。
IEでは動くようですが、IEの場合間違った記述でも動作してしまう事がある、との事…。

また、外部jsファイルに置かずhtmlの中にスクリプトを記載した場合はFirefoxでも問題なく動きました。

エラーコンソールで確認すると「syntax error」となっており、記述に間違いがあるのは確かなようなのですが、検索にかけてもそれらしいものにはヒットしませんでした。

以下、作成しているファイルからコピペです。

◆jsファイル
if (document.images) {
var img1on = new Image();
img1on.src = "img/1on.jpg";
var img1off = new Image();
img1off.src = "img/1off.jpg";
}

function On(name) {
if (document.images) {
document.images[name].src = eval(name + 'on.src');
}
}
function Off(name) {
if (document.images) {
document.images[name].src = eval(name + 'off.src');
}
}

◆htmlファイル
・<head>内に<script type="text/javascript" src="script.js"></script>を記載。
・<body>内の該当リンク部分に下記の記載。
<a href="index.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/1off.jpg" id="img1" /></a>

尚、スクリプトの内容はほぼこちら↓のサイト様の丸写し状態です。
http://www.tagindex.com/javascript/link/change1.html

jsファイルのパスに間違いが無いか等、自分で考えられる事は全て確認してみたのですがどうしても判らず、どなたか詳しい方のお知恵を拝借出来ればと思います。

よろしくお願いいたします。

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

  • 回答No.1
  • ベストアンサー

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

うーん、ソースがめためたなので、これは抜本的に換えた方がよいのでは?
こんな感じ、リストを用意しておいて参照するというのでどうでしょう?

<script>
var imglist={
img1:{on:'1.jpg',off:'2.jpg'}
,img2:{on:'1.jpg',off:'2.jpg'}
,img3:{on:'1.jpg',off:'2.jpg'}
};

function change(obj,val){
var tags=obj.getElementsByTagName('img');
for(var i=0;i<tags.length;i++){
tags[i].src=imglist[tags[i].id][val];
}
}
</script>
<a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img1" /></a>
<a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img2" /></a>
<a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img3" /></a>
お礼コメント
natsu0321

お礼率 100% (1/1)

yambejpさま、ご回答有り難うございます。
レスが遅れまして申し訳ございません。

ソース、めためたでしたか…お恥ずかしい限りです。

いただいたスクリプト、そのまま使用してみたらすんなり動きました!

まだ構文の使い方が全く理解出来ておりませんでしたので、forなどを使う方法に少々抵抗があったのですが…やはり勉強しないといけませんね。
これを機にきちんと勉強するよう致します。。。

こんなレベルの低い質問にご丁寧にお答えいただきまして、感謝です。
本当に有り難うございました。
投稿日時:2008/11/25 20:07
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

ピックアップ

ページ先頭へ