ここから本文です

JavaScript/画像上をonmouseで説明文を表示させたい

のーねむさん

2010/8/120:46:38

JavaScript/画像上をonmouseで説明文を表示させたい

やりたいこと
JavaScript/画像上をonmouseで説明文を表示させ、onmouseoutでその説明文を非表示

他の方のsampleで試しています。
<html>
<body>
<img src="" id="a1"><hr>
<div id="a2"></div><hr>
<a href="#" onMouseOver="chg('img0.jpg','ああああ')">aaaa</a>
<a href="#" onMouseOver="chg('img1.jpg','いいいい')">bbbb</a>
<a href="#" onMouseOver="chg('img2.jpg','うううう')">cccc</a>

<script>
function chg(i,m){
document.getElementById('a1').src=i;
document.getElementById('a2').innerHTML=m;
}
</script>
</body>
</html>

これをいじれば何とかできそうだと思ったのですがうまくいきません><
私の最終的な完成予定図は画像のような感じです。

どうしたらいいのでしょうか・・・。

onmouseover,body&amp;gt,html&amp;gt,a&amp;gt,script&amp;gt,style.display,hr&amp;gt

閲覧数:
1,084
回答数:
3
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

khurataさん

2010/8/205:08:15

私の環境では、質問者様の示されたコードで問題なく動作しています。
img0.jpg、img1.jpg、img2.jpg の3ファイルは、ちゃんと用意されましたでしょうか?

なお、示されたコードでは、初回ロード時に何も表示されないため、<body> を次のようにすると、良いかも知れません。
<body onload = "chg( 'img0.jpg', 'ああああ' )">

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

hid********さん

2010/8/615:16:30

質問者さんの意図が完全には読み切れていない気がしますが、

<img src="" id="a1"><hr>
<div id="a2"></div><hr>

この2行を以下のように書き換えるといいかもしれません。

<img src="" id="a1" onmouserover="document.getElementById('a2').style.display = 'block';" onmouseout="document.getElementById('a2').style.display = 'none';"><hr>
<div id="a2" style="display: none;"></div><hr>

# 修正の箇所をできるだけ少なくした形なので、かなり汚いソースです・・・

masyさん

2010/8/210:21:23

簡単に。

<html>
<body>
<hr>
<div id="explanation"></div><hr>
<a href="#" onMouseOver="chg('説明1')"><img src="01.jpg" width="200" height="100"></a>
<a href="#" onMouseOver="chg('説明2')"><img src="02.jpg" width="200" height="100"></a>
<a href="#" onMouseOver="chg('説明3')"><img src="03.jpg" width="200" height="100"></a>

<script type="text/javascript">
function chg(m){
document.getElementById('explanation').innerHTML=m;
}
</script>
</body>
</html>

画像の部分やレイアウト等はご自由に変更すればいいと思います。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる