初めまして。
よく、リンクに触れると、下に説明文が表示される…というようなサイトがありますよね。
それの応用で、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=URL><IMG src=画像Aアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクA><IMG src=画像Aアドレス></a>'">ボタンA</A></td>
<td rowspan="2"><font id="img"></font></td>
</tr>
<tr>
<td><A onMouseOver="img.innerHTML='<a href=URL><IMG src=画像Bアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクB><IMG src=画像Bアドレス></a>'">ボタンB</A></td>
</tr>
</table>
という物を作りたいのですが、innerHTMLは対応していないブラウザが多いので、使用したくないのです。
JavaScript、CSSはOKです!
よろしくおねがいします。
No.2ベストアンサー
- 回答日時:
そういうのはあらかじめ全部書き出しておいて隠す。
必要に応じて表示するときれいに書けます。
<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</a></td>
<td rowspan="2">
<div id="areaA" class="hidden"><a href=URLA><IMG src=画像A></a>Aだよん</div>
<div id="areaB" class="hidden"><a href=URLB><IMG src=画像B></a>Bですわ</div>
</td>
</tr>
<tr>
<td><a href="#" onclick="clickFunc('areaB')">ボタンB</a></td>
</tr>
</table>
No.1
- 回答日時:
onMouseOutの後がどちらも間違っています。
text.innerHTML
ではなく、
img.innerHTML
ですよね?
この回答への補足
ごめんなさい><
投稿してから気づいたんですが、消せないし、編集できないし、自分では書き込みできないし…と困っていました^^;
正しいのは下記になります。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><A onMouseOver="img.innerHTML='<a href=URL><IMG src=画像Aアドレス></a>'" onMouseOut="img.innerHTML='<a href=リンクA><IMG src=画像Aアドレス></a>'">ボタンA</A></td>
<td rowspan="2"><font id="img"></font></td>
</tr>
<tr>
<td><A onMouseOver="img.innerHTML='<a href=URL><IMG src=画像Bアドレス></a>'" onMouseOut="img.innerHTML='<a href=リンクB><IMG src=画像Bアドレス></a>'">ボタンB</A></td>
</tr>
</table>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<td> 内のテーブルを上寄せにす...
-
CSSのtransform: translate(-50...
-
エクセルでサイズ指定でPOP...
-
htmlでテーブル内にテキストボ...
-
aタグに直接style=""で:hoverを...
-
Excel セルの幅が合わない
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
エクセルでサイズに合ったもの...
-
PDFへてのテキストボックスにて...
-
Excelの列や行の幅を表示...
-
colspanで余計な余白
-
ホームページビルダー 空白の...
-
バーコードのサイズは拡大縮小...
-
端から端まで横線を引きたい
-
Microsoft1Officeの互換ソフト...
-
表の幅が広がる
-
Excel2003のVBAで、セルの幅・...
-
Excelで文字の幅を変える方法
-
ブラウザスタイルの初期化は必...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
表の中に表
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
テーブルで3セル作った行の下に...
-
<td> 内のテーブルを上寄せにす...
-
表の中でのフォーム
-
CSS line-height が効かない
-
テーブルの中のグラデーション...
-
テーブルとテーブルの間に、隙...
-
セルの背景画像を、繰り返さず1...
-
cssのfont-sizeがFirefoxで効か...
-
innerHTMLを使わずに…
-
Jimdoで表組のなかの画像をポッ...
-
スタイルシートで<table>の内側...
-
Firefox2で縦方向に隙間が出来...
-
ヤフーストアのブースのカスタ...
-
Divの幅指定を無視して子テーブ...
-
2列に表示させたい
-
テーブルにスクロールバーを付...
おすすめ情報