innerHTMLを使わずに…

質問

初めまして。

よく、リンクに触れると、下に説明文が表示される…というようなサイトがありますよね。
それの応用で、innerHTMLを使わずに以下のような物を作りたいのですが、お力を貸してくださいm(_ _)m
ボタンAとボタンBがあって、ボタンAをクリックすると画像Aを表示。
ボタンBをクリックすると画像Aから画像Bに表示が切り替わる。
その表示した画像に個別のリンクを貼る。

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ａアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＡ><IMG src=画像Ａアドレス></a>'">ボタンＡ</A></td>
<td rowspan="2"><font id="img"></font></td>
</tr>
<tr>
<td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ｂアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＢ><IMG src=画像Ｂアドレス></a>'">ボタンＢ</A></td>
</tr>
</table>

という物を作りたいのですが、innerHTMLは対応していないブラウザが多いので、使用したくないのです。
JavaScript、CSSはOKです！
よろしくおねがいします。

回答No.2

yambejp · ベストアンサー

そういうのはあらかじめ全部書き出しておいて隠す。
必要に応じて表示するときれいに書けます。
<style type="text/css">
.hidden{
display:none;
}
</style>
<script type="text/javascript">
function clickFunc(areaid){
var area=document.getElementById(areaid);
var n=area.parentNode.firstChild;
while(n){
if(n.nodeName=="DIV") n.style.display="none";
n=n.nextSibling;
}
area.style.display="block";
}
</script>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onclick="clickFunc('areaA')">ボタンＡ</a></td>
<td rowspan="2">
<div id="areaA" class="hidden"><a href=ＵＲＬＡ><IMG src=画像Ａ></a>Ａだよん</div>
<div id="areaB" class="hidden"><a href=ＵＲＬＢ><IMG src=画像Ｂ></a>Ｂですわ</div>
</td>
</tr>
<tr>
<td><a href="#" onclick="clickFunc('areaB')">ボタンＢ</a></td>
</tr>
</table>

お礼

できました～^^
こんなに早く回答して頂けて、助かりました！
ありがとうございますm(_ _)m

回答No.1

mirai_01

onMouseOutの後がどちらも間違っています。
text.innerHTML
ではなく、
img.innerHTML
ですよね？

補足

ごめんなさい＞＜
投稿してから気づいたんですが、消せないし、編集できないし、自分では書き込みできないし…と困っていました^^;
正しいのは下記になります。

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ａアドレス></a>'" onMouseOut="img.innerHTML='<a href=リンクＡ><IMG src=画像Ａアドレス></a>'">ボタンＡ</A></td>
<td rowspan="2"><font id="img"></font></td>
</tr>
<tr>
<td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ｂアドレス></a>'" onMouseOut="img.innerHTML='<a href=リンクＢ><IMG src=画像Ｂアドレス></a>'">ボタンＢ</A></td>
</tr>
</table>