OnMouseOver&outについて

質問

OnMouseOver&outの使い方について色々検索したのですが、ほとんどがすでに表示されている画像をマウスをおくことによって変化する解説しか見当たりません。

リンク先<A href="">***</A>のようなとき、***にマウスを置いたときだけ画像が現れて、離すと消える、そしてクリックするとリンク先htmlに飛ぶタグ(or Script)を作りたいのですが、教えていただければありがたいです。
画像はそのマウスの近くに表示する場合と、一定の場所に表示する場合とそれぞれ作例があると助かります。
WindowsXp、IEで作成しています。

回答No.3

asahina02 · ベストアンサー

#1です

<script type="text/javascript">
<!--
function over( name ) {
var e = document.getElementById( "gazou" );
e.innerHTML = '<img src="' + name + '.jpg">';

e.style.position = "absolute";
e.style.top = event.y;
e.style.left = event.x;
}

function out() {
var e = document.getElementById( "gazou" );
e.innerHTML = '';
}
//-->
</script>
<a href="001.html" onmouseover="over('sakura');" onmouseout="out();">桜</a>
<br>
<a href="002.html" onmouseover="over('ume');" onmouseout="out();">梅</a>
<br>
<br>
<span id="gazou"></span>

お礼

おかげさまでできました！
悩んでいたことがようやく解決できうれしいです。
ほんとうにありがとうございました。

回答No.2

asahina02

#1です
マウスの近くの場合ですが、こっちの方がいいような感じ
　e.style.position = "absolute";
　e.style.top = event.y + 000;
　e.style.left = event.x + 000;
000は好きな用に微調整を

お礼

さっそくありがとうございます。
ただ申し訳けないことに専門知識を持ちあわせていないためやってはみたものの理解することができません。

質問の説明不足があるかもしれないため補足すると
下記のような例で「桜」なり「梅」の文字の上に置いた場合のみ画像が表示され、離すと画像表示はまったくないものを想定しています。
<TR>
<TD><A href="001.html "TARGET="_top">桜</A></TD>
<TD><A href="002.html" "TARGET="_top">梅</A></TD>
<TD><A href="003.html" "TARGET="_top">柳</A></TD>
<TD><A href="004.html" "TARGET="_top">菊</A></TD>
<TD><A href="005.html" "TARGET="_top">紫陽花</A></TD>
</TR>

別にimgフォルダに
「sakura.jpg」
「ume.jpg」
「yanagi.jpg」
「kiku.jpg」
「ajisai.jpg」
があるものとする。

回答No.1

asahina02

画像を表示したい位置に以下を（gazouは任意）
<span id="gazou"></span>

アンカータグにonmouseoverとoutを付けてそれぞれ関数を呼ぶ
・onmouseoverの時に呼ばれる関数
　var e = document.getElementById( "gazou" );
　e.innerHTML = '<img src="hogehoge.gif">';

　画像を任意の位置に出したい場合は以下を追加
　e.style.position = relative;
　e.style.top = 000;
　e.style.left = 000;
　　topとleftはマウスの位置（event.x、y）などからその都度計算する

・onmouseoutの時に呼ばれる関数
　var e = document.getElementById( "gazou" );
　e.innerHTML = '';

注：動作検証はしてません。
　　スペルミスがあるかもしれませんので御了承ください