- ベストアンサー
JavaScriptでマウスオーバー時に画像切り替えする方法
- JavaScriptを使用して、マウスポインターをオーバーすると画像が切り替わる機能を実装しました。
- 実装した機能では、マウスポインターをオーバーすると別の大きな画像に切り替わります。
- しかし、実際に画像を表示しようとすると何も表示されない問題が発生しています。画像はすべてアップロードされています。
- yoal
- お礼率31% (14/45)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptの記述はきちんと見ていませんが…。 HTMLの記述に誤りがあります。 下記の部分は誤りです。 ---------- <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> ---------- 正しくは、 ---------- <img src="pp1.jpg" onMouseOver="On('img1')" onMouseOut="Off()"> <img src="pp2.jpg" onMouseOver="On('img2')" onMouseOut="Off()"> <img src="pp3.jpg" onMouseOver="On('img3')" onMouseOut="Off()"> <img src="pp4.jpg" onMouseOver="On('img4')" onMouseOut="Off()"> <img src="pp5.jpg" onMouseOver="On('img5')" onMouseOut="Off()"> <img src="pp6.jpg" onMouseOver="On('img6')" onMouseOut="Off()"> ---------- もしくは、 ---------- <a href="#" onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"></a> <a href="#" onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"></a> <a href="#" onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"></a> <a href="#" onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"></a> <a href="#" onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"></a> <a href="#" onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"></a> ---------- のようにして下さい。
その他の回答 (1)
- x_jouet_x
- ベストアンサー率68% (162/236)
> HTML部分を変えましたが、依然として、JavaScript部分の画像は×印のまま表示されないです・・・ このHTMLファイルが置いてあるフォルダの中のimageフォルダに画像ファイルを置いていますか？ <img src="xxx.jpg"> <img src="image/xxx.jpg"> が混在しているのが少々気になるのですが…。
お礼
私の場合、フォルダは、下の画像のようになっているのですが、 http://blogimg.goo.ne.jp/user_image/15/45/77fa21bb1ec4e76745bd36a14622293a.jpg （素材というフォルダに全て画像が入っています） フォルダ名に問題がある、ということでしょうかね？ <img src="xxx.jpg">と<img src="image/xxx.jpg">の違いっていうのは、 <img src="xxx.jpg">が普通の画像で、 <img src="image/xxx.jpg">とするとJavaScriptに対応する部分になるのかな、 と思っていたのですが・・・ http://blogimg.goo.ne.jp/user_image/79/0b/25eb50934ae5ad16f4328a67f96ac256.jpg
補足
今色々試してみたところ、表示されなかったのはjpgとJPGの違いが原因だったようです。 解決しました。 ありがとうございました。
お礼
回答ありがとうございます。 HTML部分を変えましたが、依然として、JavaScript部分の画像は×印のまま表示されないです・・・