スワップイメージ＋リンクの変更

まったくの素人ですが、お教えください。
以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。

<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>

a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、
hoge.jpgを大きなメインの画面にしたいと思っています。
このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。
イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2008/06/06 10:02

じゃ、データを隠しておいておいて、それをひっぱってきましょうか

<script>
window.onload=function(){
var tags=document.getElementsByTagName("img");
for(var i=0;i<tags.length;i++){
var cn=tags[i].className;
if(cn!=""){
var img=document.getElementById(cn);
if(img){
tags[i].img=img;
hideimg=tags[i].nextSibling;
while(hideimg){
if(hideimg.className=="hide") break;
hideimg=hideimg.nextSibling;
}
tags[i].hideimg=hideimg;
tags[i].onmouseover=function(){
this.img.src=this.hideimg.src;
this.img.parentNode.href=this.parentNode.href;
};
}
}
}
}
</script>
<style>
.hide{
display:none;
}
</style>
<table>
<tr>
<td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="swap1"></a></td>
<td><a href="a.html"><img src="a.jpg" class="swap1"><img src="a-hoge.jpg" class="hide"></a></td></tr>
<tr><td><a href="b.html"><img src="b.jpg" class="swap1"><img src="b-hoge.jpg" class="hide"></a></td></tr>
<tr><td><a href="c.html"><img src="c.jpg" class="swap1"><img src="c-hoge.jpg" class="hide"></a></td></tr>
</table>

この回答へのお礼

ありがとうございます！！
思っていたのとまったく同じものになりました！

お礼日時：2008/06/08 14:57

No.1 回答者： yambejp 回答日時： 2008/06/05 23:38

どのくらい汎用性が必要かわからないのである程度調整しておきました

hoge側のidと選ぶ側のclassを同じものを付けると動きます。
<script>

window.onload=function(){
var tags=document.getElementsByTagName("img");
for(var i=0;i<tags.length;i++){
var cn=tags[i].className;
if(cn!=""){
var img=document.getElementById(cn);
if(img){
tags[i].img=img;
tags[i].onmouseover=function(){
this.img.src=this.src;
this.img.parentNode.href=this.parentNode.href;
};
}
}
}
}

</script>
<table>
<tr>
<td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="swap1"></a></td>
<td><a href="a.html"><img src="a.jpg" class="swap1"></a></td>
</tr>
<tr><td><a href="b.html"><img src="b.jpg" class="swap1"></a></td></tr>
<tr><td><a href="c.html"><img src="c.jpg" class="swap1"></a></td></tr>
</table>

この回答への補足

早速のお返事ありがとうございます！！
ただ、ちょっとこちらの質問に不備がありました。

上の例でhoge.jpgが300x225、abcが200x75というサイズを持っていて、すき間の無いテーブルの中に置かれている状況です。
（abcが右側の縦に3つ並んで、左にhoge.jpgがある）
このとき、例えばa.jpgにマウスオーバーすると、hoge.jpgと「同じ大きさの画像(a-hoge.jpgとします)がhoge.jpgのエリアに表示され」かつ「リンクもhoge.htmlからa.htmlに変更される」というようなjavascriptにしたいのです。

質問が言葉足らずで申し訳ありません。
なにとぞよろしくお願いします。

補足日時：2008/06/06 00:04