オンマウスで画像と説明文を表示する方法

解決済

質問者：zekusu
質問日時：2008/06/24 23:59
回答数：3件

画像ではなく文字のリンク先にオンマウスで画像と説明文を
表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/06/25 08:41

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

- 0
- 件

通報する

この回答へのお礼

早々、ありがとう御座います。
勉強になりました。またよろしくお願いいたします。

通報する

お礼日時：2008/06/25 21:12

No.3

回答者： taaaaaaa
回答日時：2008/06/25 12:09

CSSのみのツールチップを使っています。

動作も軽いし、設置も楽ですよ。

参考URL：http://phpspot.org/blog/archives/2008/03/javascr …

- 0
- 件

通報する

この回答へのお礼

ありがとう御座います。
工夫で素人でも複雑なＨＰが作れることが分かりました。
いろいろ勉強させていただきます。今後も宜しくお願いします。

通報する

お礼日時：2008/06/25 21:16

No.2

回答者： steel_gray
回答日時：2008/06/25 12:00

マウスの位置に説明(テキストでも画像でも)を表示するサンプル。

<html>
<head>
<title></title>
<style type="text/css">
#description div{
position:absolute;
border:dashed thin black;
padding:0.1em 0.2em;
background-color:white;
}
</style>
<script type="text/javascript">
document.onmouseover=function(e){
if(! e) e=window.event;
var s = e.srcElement||e.target;
var m=document.getElementById('description').getElementsByTagName('div');
for(var i=0;m[i];i++){
if(s.nodeName=='A' && m[i].title == s.href){
m[i].style.display = '';
m[i].style.left = (e.clientX+5)+'px';
m[i].style.top = (e.clientY+5)+'px';
} else m[i].style.display = 'none';
}
}
</script>
</head>
<body>
<p>
質問サイトの<a href="http://oshiete.goo.ne.jp/">教えてgoo</a>
は<a href="http://okwave.jp/">OKWave</a>
のプラットフォームを利用しています。
</p>

<div id="description">
<div style="display:none" title="http://oshiete.goo.ne.jp/">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"><br>
<em>教えてgooの説明文</em>
</div>
<div style="display:none" title="http://okwave.jp/">
<img src="http://okwave.jp/images/logo_top.gif"><br>
<em>OKWaveの説明文</em>
</div>
</body>
</html>