- ベストアンサー
セル内のimageファイルをonMouse変える方法
縦横3列ずつの表の中心のセルにgifファイルを入れ、 その他のセルにある、リンクを貼り付けた文字にマウスを のせると、中心のgif画像がそれぞれ変わるというページを 作りたいのですが、わかりません。 セルの背景画像の変更は出来たのですが…。 どうすればよいでしょうか？
- mirai-r
- お礼率24% (59/244)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<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 img; var Iid; var ig = new Array(); ig[0]="thmimg1.jpg"; ig["img1"]="thmimg2.jpg"; ig["img2"]="thmimg3.jpg"; ig["img3"]="thmimg4.jpg"; ig["img4"]="thmimg5.jpg"; function cleanup(){ detachEvent("onmouseover", event_chg); detachEvent("onmouseout" , event_org); } function event_chg() { img.src=ig[(this.id)]; Iid=window.setInterval(mycl,100); img.replaceAdjacentText("afterEnd","ひえー！(◎0◎)"); } function event_org() { window.clearInterval(Iid); img.style.filter=""; img.src=ig[0]; img.replaceAdjacentText("afterEnd",""); } function window_onload() { img = document.getElementById("img"); img.src=ig[0]; for(i=1;i<5;i++){ var chg = document.getElementById("img"+i); chg.onmouseover=event_chg; chg.onmouseout=event_org; } } var mycl_i=100; var mycl_c=-5; function mycl(){ mycl_i+=mycl_c; img.style.filter="alpha(opacity="+mycl_i+")"; if(mycl_i==0||mycl_i==100){mycl_c*=-1;} } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <TABLE cellSpacing=1 cellPadding=1 border=1> <TR> <TD></TD> <TD> <P><A id="img2" href="http://bbb">222</A></P></TD> <TD></TD></TR> <TR> <TD><A id="img1" href="http://aaa">111</A></TD> <TD><IMG id=img></TD> <TD><A id="img3" href="http://ccc">333</A></TD></TR> <TR> <TD></TD> <TD> <P><A id="img4" href="http://ddd">444</A></P></TD> <TD></TD></TR></TABLE> <P></P> </BODY> </HTML> どうでしょう？
その他の回答 (1)
- wolfwood
- ベストアンサー率50% (199/398)
簡単な例です。 こんな感じでしょうか。 例） <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function test(i){ if(i==1){ document.img.src="***1.gif"; } if(i==2){ document.img.src="***2.gif"; } if(i==3){ document.img.src="***3.gif"; } ・ ・ （略） ・ ・ if(i==8){ document.img.src="***8.gif"; } } </SCRIPT> </HEAD> <HTML> <BODY> <TABLE border="1"> <TR> <TD><A href="" onMouseOver="test(1)">テスト１</A></TD> <TD><A href="" onMouseOver="test(2)">テスト２</A></TD> <TD><A href="" onMouseOver="test(3)">テスト３</A></TD> </TR> <TR> <TD><A href="" onMouseOver="test(4)">テスト４</A></TD> <TD><IMG src="***.gif" name="img"></TD> <TD><A href="" onMouseOver="test(5)">テスト５</A></TD> </TR> <TR> <TD><A href="" onMouseOver="test(6)">テスト６</A></TD> <TD><A href="" onMouseOver="test(7)">テスト７</A></TD> <TD><A href="" onMouseOver="test(8)">テスト８</A></TD> </TR> </TABLE> </BODY> </HTML>
お礼
まさしくこれです。ありがとうございましたm(__)m 参考にさせていただきます。
お礼
フェードアウト（？）みたいな、ふわっと絵が消える感じがいいですね！ こんなのもいいな～と、すごく参考になりました！ ありがとうございましたm(__)m