- ベストアンサー
マウスオーバーで画像変更で
以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません(><) 間違いを訂正してください!
- w-inty
- お礼率72% (1169/1618)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
おはようございます。 マウスオーバーによって切り替えたいのは、image01ですか?それともsub01_01bなのですか? それがよくわからないのですが、書き方としては、 onMouseOver="imageChange('image01','sub01_01b') 第二引数は、タグに付けた名称('sub01_01b')ではなくて、イメージまでのパス('./img/01_01b.gif')を指定する必要があります。 第一引数で指定したIMGタグの画像パスを第二引数で指定するとうまく行くと思います。
その他の回答 (2)
- Shinoa
- ベストアンサー率92% (12/13)
名前の指定というのは、第二引数で指定したIMGタグと同じ画像に切り替えるという意味でしたら、 <script language="JavaScript"> function imageChange(imageName1,imageName2){ document.images[imageName].src = document.images[imageName2].src ; } </script> onMouseOver="imageChange('image01','sub01_01b');" これでいけると思いますが、どうでしょう? 回答になっていますか?
お礼
はい、回答になってます! ありがとうございました。
- utatane
- ベストアンサー率33% (86/254)
引数が'sub01_01b'で、本来のソース場所は'./img/01_01b.gif' なんですよね? ほら、何が違うのかわかりませんか?
お礼
回答ありがとうございます。 onMouseOver="imageChange('image01','./img/01_01b.gif');" としてみましたところできました。 名前の指定で、というのはできないのでしょうか?
関連するQ&A
- マウスオーバー
マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>
- ベストアンサー
- 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
- WEB制作に関する質問です。コンテンツをスライドに
ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが なかなか、うまくいきません。 こんな感じかなと思って、つくったのですが、まったく作動しません。 何をどうすればいいか分かりません。 どなたか、教えて下さい。 javascriptは少し分かるぐらいです。 よろしくお願いします。 コードは↓ 下のクリック画像だけ指定してあります。 html <div id="main_left"> <h2>見出し</h2> <img src="image/cicletop.jpg" width="33" height="33" /><!-- 上のクリックボタン --> <div id="shuraider"> <table name="shuraid1" id="shuraid1"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid2" id="shuraid2"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid3" id="shuraid3"> <tr><td colspan="3">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid4" id="shuraid4"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> </div><!-- end shuraider --> <img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido ()" /><!-- 下のクッリックボタンでここをクリックするとtableを切り替えたい --> </div><!-- end main_left --> ここからcss #main_left{ width: 339px; } #main_left h2{ font-size: 18px; font-weight: bold; color: #ffffff; width: 339px; line-height: 2em; letter-spacing: 1em; background-image: url(../image/h2.jpg); background-color: #0F9; margin: 0; } #shuraider{ width: 337px; height: 120px; overflow: hidden; } ここからjavascript var i=1; function shuraido(){ if(i==1){ document.src="shuraid2"; i=2; } else if(i==2){ document.src="shuraid3"; i=3; } else if(i==3){ document.src="shuraid4"; i=4; } else{ document.src="shuraid1"; i=1; } } </script>
- ベストアンサー
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか? アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- マウスオーバーでテーブル表示
タイトル通りのことがしたくて、以下のようにしてみたのですが、表示されません。 どこがダメなのか教えてください。 (マウスオーバーで画像表示、はできるようになったんですが。。。) <script language="JavaScript"> function table(object,hyoji){ document.[object].style.visibility=hyoji } </script> <img src="onMouseOver('TABLE1','visible');"> <SPAN STYLE="POSITION:ABSOLUTE; TOP:30; LEFT:40; filter: Alpha(opacity=60); visibility='hidden';"> <TABLE CLASS="SETSUMEI" NAME="TABLE1"> <TR><TD CLASS="SETSUMEI">TOPページに<BR>戻ります。</TD></TR></TABLE></SPAN> テーブルって名前つけられたんだっけ…?とかいろいろ不安なところはありますが、 よろしくお願いします。
- ベストアンサー
- JavaScript
- マウスオーバーで画像の切替でタイマーをつけるには?
<html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか? 教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript でテーブル操作
javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか? (*)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- マウスが離れたら元々表示されていた画像に戻したい
次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div> を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>
- ベストアンサー
- JavaScript
- スワップイメージのフェード方法を教えてください
はじめまして。 スワップイメージを、あるサイトを参考に作ってみました。 それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。 お助けください。お願いします。 ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> <script language="JavaScript"> <!-- Img = new Array() Img[0]="img/image1.jpg" Img[1]="img/image2.jpg" Img[2]="img/image3.jpg" AImgs = new Array() for (i=0 ; i<Img.length ; i++){ AImgs[i] = new Image() AImgs[i].src = Img[i] } function Swap(a,b){ a=a.name document.images[a].src = Img[b] } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD><IMG src="img/image1.jpg" name="image"></TD> </TR> <TR> <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> <TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> </TR> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- マウスオーバーで複数の画像を切り替える
こんにちわ、お知恵を拝借させて下さい。 1週間以上探していますが、なかなか答えに結びつきません。 現在下記の内容で<div id="photoAlbum"></div>内の二つの画像の同時切替を行なおうとおもっております。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript" src="main.js"></script> </head> <body> <table width="570"> <tr> <td><div id="photoAlbum"><img src="19.jpg" width="280" height="280"><img src="19pt01.jpg" width="280" height="280"></div></td> </tr> <tr> <td align="center"><img src="19.jpg" width="80" height="80" id="changeButton1"> <img src="26.jpg" width="80" height="80" id="changeButton2"> <img src="33.jpg" width="80" height="80" id="changeButton3"> <img src="40.jpg" width="80" height="80" id="changeButton4"> <img src="57.jpg" width="80" height="80" id="changeButton5"> <img src="64.jpg" width="80" height="80" id="changeButton6"></td></tr> <tr> <td align="center"> </td> </tr> <tr> <td><table width="438" border=0 cellpadding=3 cellspacing=1 bgcolor="#999999" style="FONT-SIZE: 9pt; LINE-HEIGHT: 100%"> <tr bgcolor=#e6e6e6> <td width="30%" nowrap><SPAN style="FONT-SIZE: 8pt"> JAN</SPAN></td> <td width="46%" nowrap><SPAN style="FONT-SIZE: 8pt"> 型番</SPAN></td> <td width="24%" nowrap><SPAN style="FONT-SIZE: 8pt"> カラー</SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 19</SPAN></td> <td><SPAN> BK</SPAN></td> <td><SPAN> <a href="#" id="changeButton7">ブラック</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 26</SPAN></td> <td><SPAN> GY</SPAN></td> <td><SPAN> <a href="#" id="changeButton8">グレー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 33</SPAN></td> <td><SPAN> NV</SPAN></td> <td><SPAN> <a href="#" id="changeButton9">ネイビー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 40</SPAN></td> <td><SPAN> GR</SPAN></td> <td><SPAN> <a href="#" id="changeButton10">グリーン</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 57</SPAN></td> <td><SPAN> OR</SPAN></td> <td><SPAN> <a href="#" id="changeButton11">オレンジ</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 64</SPAN></td> <td><SPAN> RD</SPAN></td> <td><SPAN> <a href="#" id="changeButton12">レッド</a></SPAN></td> </tr> </table></td> </tr> </table> </body> </html> ----------------------------- window.onload = function(){ document.getElementById("changeButton1").onmouseover = function() { album2.change(["19.jpg","19pt01.jpg"]); } document.getElementById("changeButton2").onmouseover = function() { album2.change(["26.jpg","26pt01.jpg"]); } ~中略~ document.getElementById("changeButton12").onmouseover = function() { album3.change(["64.jpg","64pt01.jpg"]); } } var album2 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } var album3 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum.mainbody").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } } } ---------------------------- 上記内容で試していますが、changeButton7~12が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。 何か、良い方法はないでしょうか
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 onMouseOver="imageChange('image01','./img/01_01b.gif');" としてみましたところできました。 名前の指定で、というのはできないのでしょうか?