ベストアンサー

画像をオンマウスで変えるスクリプトについて教えてください。

2007/03/08 18:29

お世話になります。以下の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">  </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）
専門家の回答

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

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2007/03/08 20:44 回答No.3

こんにちは申し上げにくいのですが・・・提示スクリプトを試したところスクリプトエラーが出たのでどこか記述ミスがあるのではないでしょうか？こんな感じでできると思います <script language="JavaScript">  </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')" を削除してください

質問者

お礼 2007/03/09 13:08

こんにちは。いえいえ教えていただき本当に助かりました。「name="first"」を「id="first"」に変えて無事出来ました！今までで１番すっきりした形です。本当にありがとうございました。

その他の回答 (2)

gura_
ベストアンサー率44% (749/1683)

2007/03/08 19:40 回答No.2

　今のファイルを分割して、スクリプト部分を別ファイル(例えば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; } }

参考URL：: http://www.tohoho-web.com/js/write.htm#jsfile

質問者

お礼 2007/03/09 13:10

こんにちは。そのまま記述して出来るのですね。勉強になります。ありがとうございました。

noname#39970

2007/03/08 19:24 回答No.1

質問者

お礼 2007/03/09 13:11

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

関連するQ&A

画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような感じです。
- ベストアンサー
- JavaScript
オンマウスで画像表示する外部スクリプトを呼び出したいのですが
お知恵をお貸し下さい。よろしくお願い致します。「画像Aを表示」→「オンマウスで画像Bを表示」という効果を、外部スクリプトを使ってやってみたいと思っています。ただ外部スクリプトを読み込む時の指定方法がわかりません。ちなみに、以下のスクリプトを外部に分けず、 <head>～</head>内に書いた時はきちんと動いておりました。 ※外部スクリプトの記述（sample.js） <SCRIPT TYPE="text/javascript">  </SCRIPT> ========================================= ※読み込む先の記述（sample.jsは指定してあります） <a href="index.html" onMouseOver="On('img01')" onMouseOut="Off()"> <FONT SIZE="2" COLOR="indigo">【1】</font></a> 【1】の文字にマウスを持っていくと、違う場所に表示してある画像Aが画像Bに変わるようにしたいのです。オンマウスオーバーの指定がよくないのかと思うのですが具体的にどこをどうしたらいいか、よろしくお願い致します。
- 締切済み
- JavaScript
画像／文字をスクロールさせるスクリプト
表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。今のところ、左へ向けてスクロールしていくものしか発見できませんでした。現状、/jquery-1.3.2.min.js　と、sc_text/jcarousellite_1.0.1.js　を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては１．左　右　などのボタンで、スクロールの方向を、簡単に切り替えられる。（もちろん、現在表示の位置から方向が変わる） ⇒例えば、上のサンプルで、５を見逃したら、ボタンを押す（あるいはマウスオン）で回転方向が逆になって、５が左から出てくる　という感じです。２．早送り、巻き戻し　など、スクロールの速度も変更できる。　３や４が表示されているとき、ボタンやマウスオンで、動きが早くなって、９や10まで素早く移動できるという感じです。そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか？ jcarousellite　の改造方法でもけっこうです。スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite　のように簡単に指定できると、たいへん助かります。
- 締切済み
- JavaScript
javascriptについて
javascriptに関してまだまだ初心者で困っております．作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです．そこで以下のようなプログラムを作成したのですが，うまく動きません．ご助言頂ければ幸いです． <html> <head> <script type="text/javascript>  </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
bxsliderが動かない
Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。試しに白紙の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=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。どの部分が間違っているのでしょうか？ご教授お願いします。
- ベストアンサー
- JavaScript
javascriptでの画像の先読みについて（その２）
その１からの続きです。。以下が私の作ったソースです。 <script language="JavaScript">  </script> ＃関係ないですけど、off_image()はいらないかも…。以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。よろしくお願いいたします。関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- ベストアンサー
- JavaScript
java scriptでのロールオーバーで現在地表示する方法について教えてください。
課題でサイトを作っていて、メニューにjava scriptでのロールオーバーを使用したいと考えています。ロールオーバーまでは本や他のサイトさんを見たりして↓まで何とかできたのですが、現在地がわかるように、そのページにいるときはそのボタンがマウスオーバーした状態のままにする方法がわからず途方に暮れております。説明がわかりにくくて申し訳ありません; もし分かる方がいらっしゃいましたらお願い致します! <script language="javascript"></script> <a href="test.html" onMouseOver="btnMouseOver()" onMouseOut="btnMouseOut()"> <img border="0" name="btnFormImg" src="img/01.gif" /></a>
- 締切済み
- JavaScript
プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、下記方法では画像の枚数が増えたり、複雑な動作を作る場合、複雑な構造になってしまうと思うのですが、少しでも複雑にならない方法はありますか？フラッシュは使わずにプログラムだけで同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript">  </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }
- ベストアンサー
- JavaScript
ご教授ください。
無限ループとめる方法教えてください。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>jquery-galleryview-2.1.1</title> <link rel="stylesheet" href="css/jquery.galleryview-3.0.css" /> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.4"); </script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.galleryview-3.0.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $('#gallery').galleryView({ panel_width: 450, panel_height: 300, frame_width: 90, frame_height: 60 }); }); </script> </head> <body onLoad="location.reload(true)"> <ul id="gallery"> <li><img src="http://lorempixum.com/450/300/people/1" /></li> <li><img src="http://lorempixum.com/450/300/people/2" /></li> <li><img src="http://lorempixum.com/450/300/people/3" /></li> <li><img src="http://lorempixum.com/450/300/people/4" /></li> <li><img src="http://lorempixum.com/450/300/people/5" /></li> <li><img src="http://lorempixum.com/450/300/people/6" /></li> <li><img src="http://lorempixum.com/450/300/people/7" /></li> <li><img src="http://lorempixum.com/450/300/people/8" /></li> </ul> </body> </html> というページがございまして。親ページで tickboxを開くぼたんを押すとこのページがでる仕組みなんですが、 Firefoxのみ表示されません透明のこのページがでて、作動はしてるのですが。画像まで読み込みしません。それで、onLoad="location.reload(true)" を入れたのですが、無限ループ。これを１回で終らせる方法、および、別の方法ご存知の方いらっしゃると信じて投稿です。どうか、教えてください。親ページでやる方法があればそれでもかまいません。まだまだ経験不足で、よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
画像の上に重なるように違う画像をだしたい
画像の上にマウスがのると同じ位置で違う画像をだしたいのですが以下のプログラムだとブラウザ上で画像が表示されません。訂正個所をご指摘いただけませんでしょうか。よろしくお願いします！  </SCRIPT> 中略 <a href="http://www＊＊/" target="_blank" onMouseOver="chgImg(1)"onMouseOut="rstImg(0)"><img src="＊＊1.gif" BORDER="0" width="128" height="24"; return true;. ><img scr="＊＊＊.gif" BORDER="0" width="128" height="24"; return true;.></a> <TD></table>
- ベストアンサー
- JavaScript

画像をオンマウスで変えるスクリプトについて教えてください。