- ベストアンサー
onMouseで、画像を変更する方法で…
最近よく見かけるのですが、リンクの貼り付けられたボタン（gif画像等）にマウスを乗せると、その画像と同時に他のセル内の画像もそれぞれ変更するといったページを見かけます。ボタンのみの画像の変更は出来たのですが、onMouseで、2つの画像を同時に変更するにはどうすればよいでしょうか？ ちなみにそのボタンは5つ作る予定です。
- mirai-r
- お礼率24% (59/244)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞よければまた回答をお願いします。 せっせ。・°°・_〆(・_・；)(；・_・)φ_・°°・。せっせ どうでしょうか。 ↓これは背景画 background="haikei.jpg" ↓これはボタンです５個あります。 <IMG alt="" src="button*.gif" name=btn id=button*> ↓これが表示される画像です。５個あります。 <IMG ・・・・ src="img*.jpg" width=103 id=gazou* > <HTML> <HEAD> <META name=VI60_defaultClientScript content=JavaScript> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" /> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- var ig = new Array(); function cleanup(){ detachEvent("onmouseover", event_onmouseover); detachEvent("onmouseout" , event_onmouseout); } function img_disp_disp(ev) { var img = sub1(ev); img.style.display=""; } function img_disp_none(ev) { var img = sub1(ev); img.style.display="none"; } function sub1(ev){ if(ev){var btn=ev.target;} else {var btn=event.srcElement;} var s = btn.id.substr(6,1); return document.getElementById("gazou" + btn.id.substr(6,1)); } function window_onload() { ig = document.getElementsByName("btn"); for(i=0;i<ig.length;i++){ ig[i].onmouseover=img_disp_disp; ig[i].onmouseout=img_disp_none; } } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P> <TABLE cellSpacing=1 cellPadding=1 width="655" border=0 HEIGHT="339"> <TR><TD HEIGHT="136" width="72"> <IMG alt="" src="button1.gif" name=btn id=button1> </TD><TD background="haikei.jpg" HEIGHT="271" width="495" ROWSPAN="2"> <DIV STYLE="WIDTH: 405px; HEIGHT: 347px"> <IMG style="display: none; z-index: 100; left: 424; position: absolute; top: 90" height =77 src="img1.jpg" width=103 id=gazou1 > <IMG style="display: none; z-index: 101; left: 350; position: absolute; top: 255" height =77 src="img2.jpg" width=103 id=gazou2 > <IMG style="display: none; z-index: 102; left: 147; position: absolute; top: 77" height =77 src="img3.jpg" width=103 id=gazou3 > <IMG style="display: none; z-index: 102; left: 283; position: absolute; top: 134" height =77 src="img4.jpg" width=103 id=gazou4 > <IMG style="display: none; z-index: 102; left: 154; position: absolute; top: 217" height =77 src="img5.jpg" width=103 id=gazou5 > </DIV> </TD><TD HEIGHT="136" WIDTH="68"> <IMG alt="" src="button3.gif" name=btn id=button3> </TD></TR> <TR><TD HEIGHT="135" width="72"> <IMG alt="" src="button2.gif" name=btn id=button2> </TD><TD HEIGHT="135" WIDTH="68"> <IMG alt="" src="button4.gif" name=btn id=button4> </TD></TR> <TR><TD HEIGHT="56" WIDTH="647" COLSPAN="3"> <P ALIGN="center"> <IMG alt="" src="button5.gif" name=btn id=button5> </P> </TD></TR></TABLE> </BODY> </HTML>
その他の回答 (4)
- cat_2001
- ベストアンサー率58% (35/60)
もう遅いでしょうかね・・・？念の為、5個にした形でソースを書きました。 しかし、先日の私のソースは大変不親切で「う～ん、分かりにくい！！」と自分で思ってしまったので、もう少し分かりやすく画像名を変えてみました。（笑） これで「ボタン」と「変更したい画像」との差がはっきり理解できるかと思います。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <SCRIPT Language="JavaScript"> function htmlChange(text) { document.change1.src = text; } function htmlUnChange() { document.change1.src = "images/change.gif"; } <!-- //ブラウザの判別 var agent = navigator.userAgent; var nv = 0; if(agent.indexOf("Mozailla/2") == 0){var nv = 1} //新規画像の読み込み if(nv != 1) document.onimage1 = new Image(); document.onimage1.src="./images/button1_2.gif"; document.onimage2 = new Image(); document.onimage2.src="./images/button2_2.gif"; document.onimage3 = new Image(); document.onimage3.src="./images/button3_2.gif"; document.onimage4 = new Image(); document.onimage4.src="./images/button4_2.gif"; document.onimage5 = new Image(); document.onimage5.src="./images/button5_2.gif"; //■画像の入れ換え function menuon(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/button1_2.gif"} if(i == 2){document.menu2.src="./images/button2_2.gif"} if(i == 3){document.menu3.src="./images/button3_2.gif"} if(i == 4){document.menu4.src="./images/button4_2.gif"} if(i == 5){document.menu5.src="./images/button5_2.gif"} } } function menuout(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/button1_1.gif"} if(i == 2){document.menu2.src="./images/button2_1.gif"} if(i == 3){document.menu3.src="./images/button3_1.gif"} if(i == 4){document.menu4.src="./images/button4_1.gif"} if(i == 5){document.menu5.src="./images/button5_1.gif"} } } // --> </script> </head> <body bgcolor="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="280"> <tr> <td><img border="0" src="images/change.gif" NAME="change1" width="280" height="200"></td> </tr> <tr> <td align="center"><a href="test1.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/button1_1.gif" NAME="menu1" width="150" height="40"></a></td> </tr> <tr> <td align="center"><a href="test2.htm" onMouseover="htmlChange('images/change_2.gif');menuon(2);" onMouseout="htmlUnChange();menuout(2);"><img border="0" src="images/button2_1.gif" NAME="menu2" width="150" height="40"></a></td> </tr> <tr> <td align="center"><a href="test3.htm" onMouseover="htmlChange('images/change_3.gif');menuon(3);" onMouseout="htmlUnChange();menuout(3);"><img border="0" src="images/button3_1.gif" NAME="menu3" width="150" height="40"></a></td> </tr> <tr> <td align="center"><a href="test4.htm" onMouseover="htmlChange('images/change_4.gif');menuon(4);" onMouseout="htmlUnChange();menuout(4);"><img border="0" src="images/button4_1.gif" NAME="menu4" width="150" height="40"></a></td> </tr> <tr> <td align="center"><a href="test5.htm" onMouseover="htmlChange('images/change_5.gif');menuon(5);" onMouseout="htmlUnChange();menuout(5);"><img border="0" src="images/button5_1.gif" NAME="menu5" width="150" height="40"></a></td> </tr> </table> </body> </html> です。実際動く事は立証済みです。 ・・・これを丸まるコピペでもいいのですが、ちゃんと「どこがどうゆうようなスクリプトなのか、そのおおよその意味」を少しでもいじってみながら理解してくださいね。（そうしないと、また6個になったら・・・100個になったら・・・等、カスタムする時に分からなくなりますよ。）
- cat_2001
- ベストアンサー率58% (35/60)
今日は。 こんなんで如何でしょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <SCRIPT Language="JavaScript"> function htmlChange(text) { document.change1.src = text; } function htmlUnChange() { document.change1.src = "images/change.gif"; } <!-- //ブラウザの判別 var agent = navigator.userAgent; var nv = 0; if(agent.indexOf("Mozailla/2") == 0){var nv = 1} //新規画像の読み込み if(nv != 1) document.onimage1 = new Image(); document.onimage1.src="./images/change_2_2.gif"; //■画像の入れ換え function menuon(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/change_2_2.gif"} } } function menuout(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/change_2.gif"} } } // --> </script> </head> <body> <table> <tr> <td><img border="0" src="images/change.gif" NAME="change1" width="300" height="200"></td> </tr> <tr> <td><a href="test.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/change_2.gif" NAME="menu1" width="100" height="50"></a></td> </tr> </table> </body> </html>
補足
こんにちは！回答有難うございます_(_ _)_ まさしくこんな感じです！ この、下のほうにあるリンクを貼り付けたボタン（画像）を増やす場合は、どこを書き加えていくといいのでしょうか？（5個くらいまで増やします） すみません、初心者なものでくだらない質問ばかりで…(>_<;) よければまた宜しくお願いしますm(__)m
- cat_2001
- ベストアンサー率58% (35/60)
今日は。 こんなんで如何でしょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <SCRIPT Language="JavaScript"> function htmlChange(text) { document.change1.src = text; } function htmlUnChange() { document.change1.src = "images/change.gif"; } <!-- //ブラウザの判別 var agent = navigator.userAgent; var nv = 0; if(agent.indexOf("Mozailla/2") == 0){var nv = 1} //新規画像の読み込み if(nv != 1) document.onimage1 = new Image(); document.onimage1.src="./images/change_2_2.gif"; //■画像の入れ換え function menuon(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/change_2_2.gif"} } } function menuout(i){ if(nv != 1){ if(i == 1){document.menu1.src="./images/change_2.gif"} } } // --> </script> </head> <body bgcolor="#FFFFFF"> <table border="0" cellspacing="1"> <tr> <td><img border="0" src="images/change.gif" NAME="change1" width="300" height="200"></td> </tr> <tr> <td><a href="products_w.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/change_2.gif" NAME="menu1" width="100" height="50"></a></td> </tr> </table> </body> </html>
- ittochan
- ベストアンサー率64% (2667/4137)
こういうのでしょうか？ <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" /> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- var ig = new Array(); function cleanup(){ detachEvent("onmouseover", event_onmouseover); detachEvent("onmouseout" , event_onmouseout); } function ig_onmouseover() { ig[0].src="img5.jpg"; ig[1].src="img5.jpg"; ig[2].src="img5.jpg"; ig[3].src="img5.jpg"; } function ig_onmouseout() { ig[0].src="img1.jpg"; ig[1].src="img2.jpg"; ig[2].src="img3.jpg"; ig[3].src="img4.jpg"; } function window_onload() { var nn=document.getElementById("ig"); ig = nn.getElementsByTagName("IMG"); //ig[0]は最初の画像のこと ig[0].onmouseover=ig_onmouseover; ig[0].onmouseout=ig_onmouseout; } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P><DIV id=ig> <IMG height=77 src="img1.jpg" width=103> <IMG height=77 src="img2.jpg" width=103> <IMG height=77 src="img3.jpg" width=103> <IMG height=77 src="img4.jpg" width=103> </DIV> <P></P> </BODY> </HTML>
補足
すみませんm(__)m 私の説明が悪かったようで、ちょっと違いました。 私の作りたいものと全く同じ機能を持っているページがありました！ ↓↓↓↓ http://www.bloomix.com/ このページのような感じなんですが、私にJavaScriptの知識がないので、ソースを見ても全然わかりません(>_<) よければまた回答をお願いします。
お礼
ありがとうございました！ 自分の作ろうと思ってたのとは少し違ったのですが、逆に『こんなのもあるのか！』と、面白くていいな～と思いました！ 参考にさせていただきます。 わざわざありがとうございましたm(__)m