画像を変えるスクリプトのオブジェクト作成について
- この質問では、画像を変えるスクリプトについての質疑が行われています。
- スクリプトの中でオブジェクトを作っている理由や、普通にsrcプロパティを変更できないのかについての疑問が述べられています。
- 質問者は、iとjを変えてsrcプロパティを操作する方法があるのか知りたいと考えています。
- ベストアンサー
画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </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を変えるような 感じです。
- shoshosho
- お礼率97% (131/134)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
レスポンスを良くするためだと思います。 上記のやり方だと、初期起動時に全画像を読み込みますが、 >普通にsrcプロパティを変更するだけ のやり方だと マウスのイベントが走った時点で、画像の読み込みに行きますから、 キャッシュが無い一回目の動きは、読み込みラグが発生します。 特に画像サイズが大きくて、サーバに上がってる際に違いが出ます。 ローカルで動かしている、又はキャッシュに画像が残ってる状態では、違いは感じられませんが、。
関連するQ&A
- JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方
いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>
- 締切済み
- JavaScript
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- IE5でonmouseoverがうまく行きません。
画像にマウスが触れた時にその画像を 替えたいのですが，NNではうまく行き， IE5では画像は変化せずうまく行きません。 IE5は次のエラーメッセージがでます。 ページでエラーが発生しました。 -> オブジェクトを指定してください。 よろしくお願いします。 <HTML><HEAD><title></title> <script language="javascript"> <!--- img = new Array(); for (i = 0; i <= 1; i++) { imag[i] = new Image() ; imag[i].src = "on_" + i + ".gif"; } function On(n) { document.images['menu'+n].src = imag[n].src; } function Off(n) { document.images['menu'+n].src = "off_" + n + ".gif"; } //---> </script></head> <BODY> <a href="xxx.html" TARGET="MAIN" onMouseOver="On(0)" onMouseOut="Off(0)"> <img src="off_0.gif" name="menu0" border="0"></a> <a href="yyy.html" TARGET="MAIN" onMouseOver="On(1)" onMouseOut="Off(1)"> <img src="off_1.gif" name="menu1" border="0"></a> </BODY></HTML>
- ベストアンサー
- JavaScript
- 画像クリックで画像変化を1ページに複数表示
どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？ ４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>
- ベストアンサー
- JavaScript
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- javascritpの中身をHTML-lintでエラーが出ないようにしたい
英語のサイトで海外の方が作ったものを Another HTML-lint gateway http://openlab.jp/k16/htmllint/htmllinte.html でチェックしてエラーをできるだけなくしたいのですが、 私がJavascriptがさっぱりわからず、つまづいてしまいました。 ---------------------- <script language="JavaScript1.2">mmLoadMenus();</script> <a href="about.asp" onMouseOver="MM_showMenu(window.mm_menu_0119092132_0,0,23,null,'image2');MM_swapImage('image2','','images/menu_about2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_about2.gif" name="image2" border="0" id="image2"></a><a href="basel.asp" onMouseOver="MM_swapImage('image1','','images/menu_basel2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_basel2.gif" name="image1" border="0" id="image1"></a><a href="activitiesassist.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090425_0,0,23,null,'image3');MM_swapImage('image3','','images/menu_assist2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_assist2.gif" name="image3" border="0" id="image3"></a><a href="activitiesreport.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090642_0,0,23,null,'image4');MM_swapImage('image4','','images/menu_report2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_report2.gif" name="image4" border="0" id="image4"></a><a href="specificinfo_main.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090857_0,0,23,null,'image5');MM_swapImage('image5','','images/menu_specific2_selected.gif',1)" onMouseOut="MM_startTimeout();;MM_swapImgRestore()"><img src="images/menu_specific2.gif" name="image5" border="0" id="image5"></a><a href="links.asp" onMouseOver="MM_swapImage('Image2','','images/menu_links2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_links2.gif" name="Image2" border="0" id="Img1"></a> ---------------------- ・body内にscriptが書かれています。 ・alt属性の入れ方がわかりませんでした。 ・<script language="JavaScript1.2">は、 <script type="text/JavaScript1.2">で良いのでしょうか。 ・同じnameがあり(idも合っていない)変更しても問題ないでしょうか？ 初心者な質問かと思いますが、 回答いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- スワップイメージとロールオーバーの組み合わせで…
上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>
- ベストアンサー
- JavaScript
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- 画像をオンマウスで変えるスクリプトについて教えてください。
お世話になります。 以下の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>
- ベストアンサー
- JavaScript
- 指定したセルに表示
画像を触ると拡大表示されるサンプルソース（フリー）ですが、隣り合ったセルに表示させるにはどうすればよいでしょうか？ 同じテーブル（セル）内では問題なく動くのですが異なるセルへの表示方法がわかりません。 （Aのセルに拡大・Bのセルにサムネイル）としたいのですが・・・よろしくお願いいたします。 <script language="JavaScript1.1"> <!-- OnMouse = new Array(); for(i = 1; i < 10; i++) { OnMouse[i] = new Image(); OnMouse[i].src = "image/a" + i + ".jpg"; } function OnMoSet1(flag, position) { document.images[position].src=OnMouse[flag].src; return false; } //--> </script> </head> <img src="image/a1.jpg" alt="onmousea-1" border=0 width="318" height="200"> <a href="#" onMouseOver="OnMoSet1(3,0)" onMouseOut="OnMoSet1(1,0)" onClick="return OnMoSet1(3,0)"> <img src="image/a2.gif" alt="onmousea-2" border=0 width="48" height="48"></a> <a href="#" onMouseOver="OnMoSet1(5,0)" onMouseOut="OnMoSet1(1,0)" onClick="return OnMoSet1(5,0)"> <img src="image/a4.gif" alt="onmousea-3" border=0 width="48" height="48"></a></bod </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます^^ なるほどオブジェクトができた段階ではまだ読み込みはしないんですね。 それで軽くなることが利点だとわかりました。 詳しいご説明ありがとうございました。