• ベストアンサー

JavaScriptでの画像ロールオーバーについて教えて下さい。

非常に初歩的な事で申し訳ありません。 サイトのメニュー部分の画像をJavaScriptでマウスオーバー時に切替たいのですが、うまくいきません。 IE6とOpera9ではすべて表示できたのですが、Firefox1.5では一部の画像だけ切り替えられませんでした。 原因が分からず困っています。 function chImg(img, str){ document.images[img].src = str;} よろしくお願いします。

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

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

UPされたものを拝見しました。 文法上特におかしいところはありません。 マウスオーバーが効かないのは 製品案内のボタンひとつのみかと思います。 検討の結果imgタグの item というid名が良くないようです。 確かにjavascriptではitem()というオブジェクトがあります。 Ff、NNともに動きませんのでGeckoでは予約語なのかもしれません。 ともかく item を止めて、別のIDに変更してみてください。 .

adidas111
質問者

お礼

ID変更でうまくできました! javascriptは勉強を始めたところで分からないまま、見よう見まねで組み込んでみたので、完全に落とし穴にはまってました。 本当にありがとうございました。

その他の回答 (3)

回答No.3

マウスオーバー部分のタグソースがなかったので chImg(img, str)のimgの渡し方がわからなかったのですが 補足のソースを見る限りではidを文字列として渡していますので 特に問題はないように思います。 <a>タグにonmouseoverを入れるのは全然普通で問題ありませんよ。 私の方では補足の書き方で FF1.5、NN7.1、IE7.0 問題なく表示します。 試しに以下のソースでFFで確認してください。 <script type="text/javascript"> function chImg(img,str){ document.images[img].src = "http://oshiete.goo.ne.jp/images/"+str; } </script> <body> <a href="#" onMouseover="chImg('id','h1/h1_50b.gif')" onMouseout="chImg('id','goo.gif')"> <img border="0" src="http://oshiete.goo.ne.jp/images/goo.gif" id="id" /></a> </body> .

adidas111
質問者

お礼

確認してみましたところ問題なく表示できますね。 よろしくお願いします。

回答No.2

#1です。 すみません'がぬけてました・・orz <script> function chImg(img, str){ img.src = str; } </script> <img src="img1.gif" onmouseover="chImg(this,'img2.gif')" > .

adidas111
質問者

お礼

できました!ありがとうございます。 {document.images[img].src = str;}の書き方が問題だったのでしょうか。 それとも<img>タグではなく<a>タグにonmouseoverを入れていたのが問題だったのでしょうか。ソースは <a href="" onMouseover="chImg('id','img2.gif')" onMouseout="chImg('id','img1.gif')"><img src="img1.gif" id="id" /></a> 後学の為に教えて頂ければ幸いです。

回答No.1

以下のようにしてみて下さい・・ <script> function chImg(img, str){ img.src = str; } </script> <img src="img1.gif" onmouseover="chImg(this,img2.gif')" >

関連するQ&A