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

質問

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

<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 · ベストアンサー

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

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

お礼

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

回答No.1

yambejp

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

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にしたいのです。

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