- ベストアンサー
スワップイメージ＋リンクの変更 その2
- 質問の目的は、テーブル内の画像とリンクを操作するJavaScriptの作成です。
- マウスオーバー時に画像がスワップされ、マウスが外れると元の画像に戻ります。
- リンクのスワップは不要です。
- bilateraria165
- お礼率51% (69/133)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="m"></a></td> <td><a href="a.html"><img src="a.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td></tr> </table> <script> function $(o){return document.getElementById(o);} </script>
その他の回答 (2)
うんともすんともレスがないので、結局これか？ <html> <head> <script> window.onload=function(){ var im=document.images; im[1].onmouseout = function(){ this.src='a.jpg'; } im[2].onmouseout = function(){ this.src='b.jpg'; } im[3].onmouseout = function(){ this.src='c.jpg'; } im[1].onmouseover=function(){ document.images[0].src='a.jpg';} im[2].onmouseover=function(){ document.images[0].src='b.jpg';} im[3].onmouseover=function(){ document.images[0].src='c.jpg';} } </script> </head> <body> <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table>
お礼
レスが遅くなってしまい、申し訳ありません！ No.1での回答で教えていただいたものを採用することになったのち、 お礼をするのを失念しておりました。 ご教授いただき、大変ありがとうございました。
document.images[0].src="hoge.jpg"; 数値は、0かどうかはわかりませんが、適当に探してください！ 何番目の<img>イメージタグなのか・・・ 多分id="m"は省略できます
お礼
ありがとうございます！ onMouseOver/onMouseOutのワザは存じ上げていました。 この記述でも十分動作には問題ないのですが、それをちょっと躊躇していたのは、hoge.jpgの指定などを直接imgタグの中に書き込まないといけないかな、と思っていたためです。 imgタグなどに入れるのはclassの指定くらいで、あとはヘッダにjavascriptを記述するだけ、みたいな書き方はやはり難しいでしょうか。。。