ベストアンサー

onMouseで、画像を変更する方法で…

2002/10/07 17:20

最近よく見かけるのですが、リンクの貼り付けられたボタン（gif画像等）にマウスを乗せると、その画像と同時に他のセル内の画像もそれぞれ変更するといったページを見かけます。ボタンのみの画像の変更は出来たのですが、onMouseで、2つの画像を同時に変更するにはどうすればよいでしょうか？ちなみにそのボタンは5つ作る予定です。

mirai-r
お礼率24% (59/244)

JavaScript
回答数5
ありがとう数2

みんなの回答 （5）
専門家の回答

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

ベストアンサー

ittochan
ベストアンサー率64% (2667/4137)

2002/10/09 00:14 回答No.4

＞よければまた回答をお願いします。せっせ。・°°・_〆(・_・；)(；・_・)φ_・°°・。せっせどうでしょうか。 ↓これは背景画 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>  </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>

質問者

お礼 2002/10/09 15:35

ありがとうございました！自分の作ろうと思ってたのとは少し違ったのですが、逆に『こんなのもあるのか！』と、面白くていいな～と思いました！参考にさせていただきます。わざわざありがとうございましたm(__)m

その他の回答 (4)

cat_2001
ベストアンサー率58% (35/60)

2002/10/11 12:17 回答No.5

もう遅いでしょうかね・・・？念の為、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"; }  </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)

2002/10/08 21:02 回答No.3

今日は。こんなんで如何でしょう。 <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"; }  </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>

質問者

補足 2002/10/09 15:35

こんにちは！回答有難うございます_(_ _)_ まさしくこんな感じです！この、下のほうにあるリンクを貼り付けたボタン（画像）を増やす場合は、どこを書き加えていくといいのでしょうか？（5個くらいまで増やします）すみません、初心者なものでくだらない質問ばかりで…(>_<;) よければまた宜しくお願いしますm(__)m

cat_2001
ベストアンサー率58% (35/60)

2002/10/08 21:01 回答No.2

今日は。こんなんで如何でしょう。 <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"; }  </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)

2002/10/07 21:31 回答No.1

こういうのでしょうか？ <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" /> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript>  </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>

質問者

補足 2002/10/08 13:23

すみませんm(__)m 私の説明が悪かったようで、ちょっと違いました。私の作りたいものと全く同じ機能を持っているページがありました！ ↓↓↓↓ http://www.bloomix.com/ このページのような感じなんですが、私にJavaScriptの知識がないので、ソースを見ても全然わかりません(>_<) よければまた回答をお願いします。

onMouseで、画像を変更する方法で…