- ベストアンサー
画像をオンマウスで変えるスクリプトについて教えてください。
お世話になります。 以下のJavaScriptを外部のjsファイルにしたいです。 「その１」にオンマウスすると、default.gifがaaa.gifに、 「その２」にオンマウスすると、default.gifがbbb.gifに 表示が変わります。 HTMLを極力綺麗にしたいのですが、外部にすることは可能でしょうか？ これとまったく同じ動作ができるスクリプトでも構いません。 ご存知の方がいらっしゃったら、教えていただきたいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ロールオーバー</title> <SCRIPT language="JavaScript"> <!-- image = new Array(); image[0] = new Image(); image[0].src = "default.gif"; image[1] = new Image(); image[1].src = "aaa.gif"; image[2] = new Image(); image[2].src = "bbb.gif"; function Img_2(n){ if(document.images){ document.first.src=image[n-1].src; } } --> </SCRIPT> </head> <body> <img src="default.gif" name="first" /> <ul> <li><a href="#" onMouseOver="JavaScript:Img_2(2);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(2);document.myFORM.myMSG.value=''">その1</a></li> <li><a href="#" onMouseOver="JavaScript:Img_2(3);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(3);document.myFORM.myMSG.value=''">その2</a></li> </ul> </body> </html>
- ba-demi
- お礼率65% (21/32)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 申し上げにくいのですが・・・提示スクリプトを試したところスクリプトエラーが出たのでどこか記述ミスがあるのではないでしょうか？ こんな感じでできると思います <script language="JavaScript"> <!-- function SwapImage(img) { document.getElementById("first").src = img; } //--> </script> <img src="defalt.gif" name="first"> <ul> <li><a onmouseover="SwapImage('aaa.gif')" onMouseOut="SwapImage('defalt.gif')">その1</a></li> <li><a onmouseover="SwapImage('bbb.gif')" onMouseOut="SwapImage('defalt.gif')">その2</a></li> </ul> 提示スクリプトではoverとoutが同じなので変えたら変えたままなのかなと思うのでその時は onMouseOut="SwapImage('defalt.gif')" を削除してください
その他の回答 (2)
- gura_
- ベストアンサー率44% (749/1683)
今のファイルを分割して、スクリプト部分を別ファイル(例えばgaibu.js)にすればよいでしょう。例↓ 【htmlファイル】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ロールオーバー</title> <script type="text/javascript" src="gaibu.js"> </script> </head> <body> <img src="default.gif" name="first" /> <ul> <li><a href="#" onMouseOver="JavaScript:Img_2(2);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(2);document.myFORM.myMSG.value=''">その1</a></li> <li><a href="#" onMouseOver="JavaScript:Img_2(3);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(3);document.myFORM.myMSG.value=''">その2</a></li> </ul> </body> </html> 【gaibu.js】 image = new Array(); image[0] = new Image(); image[0].src = "default.gif"; image[1] = new Image(); image[1].src = "aaa.gif"; image[2] = new Image(); image[2].src = "bbb.gif"; function Img_2(n){ if(document.images){ document.first.src=image[n-1].src; } }
お礼
こんにちは。 そのまま記述して出来るのですね。勉強になります。 ありがとうございました。
<script language="JavaScript" src="a.js" />
お礼
回答ありがとうございました。
お礼
こんにちは。いえいえ教えていただき本当に助かりました。 「name="first"」を「id="first"」に変えて無事出来ました！ 今までで１番すっきりした形です。本当にありがとうございました。