※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。

■ オンマウスで画像の表示非表示1

今回のオンマウスはある文字にマウスが乗った場合、別の場所にある画像を表示させ、マウスが離れると非表示にします。

このサンプルは単純に画像を表示非表示にするだけです。
どういう意味かというと、非表示状態は単に画像が非表示になってるだけで、実際にはその画像の領域は残ってままになりますから、自動的に文字が詰まったり、行数が詰まったりはしません。
ある意味便利であったりします。

「マウスが乗ったら..」と言うのを専用の言葉(Javascriptなど)でオンマウス、あるいはマウスオーバーと言います。
また、 「マウスが離れたら..」と言うのを同じく、マウスアウトと言います。

同じような処理はJavascriptでも可能です。

◆ 実行サンプル


【リンク文字の場合】
画像1
画像2
トップ 新着情報
【spanタグの場合】
画像1
画像2
トップ 新着情報
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、画像にマウスが乗った場合の処理は、
onmouseover="(javascriptの記述)"

マウスが画像から離れた場合の処理は、
onmouseout="(javascriptの記述)"

と記述します。

画像を非表示にしたい時は、次のようにスタイル属性「visibility」「hidden」を指定します。
style="visibility:hidden"

画像を表示したい時は、スタイル属性の「visibility」を消去するか、「visible」を指定します。
style="visibility:visible"

次に画像の「img」タグで「name="image1"」と名前をつけてたとき、Javascriptなどでこの画像を非表示にする場合は次のように指定します。
image1.style.visibility='hidden';

また、その画像を、Javascriptなどで表示したい場合は次のように指定を解除します。
image1.style.visibility='';

したがって、画像にマウスが乗った場合に画像を表示したければ
onmouseover="image1.style.visibility='';"

ですし、マウスが離れた時非表示にしたければ
onmouseout="image1.style.visibility='hidden';"

と記述します。

画像を最初に表示したくなければ、
<img src="(画像のファイル名)" style="visibility:hidden">

と記述しておきます。

そして、変化させたい文字がA(リンク)タグなら、次のように記述します。
<a href="(ジャンプ先のアドレスを記述)" onmouseover="image1.style.visibility='';" onmouseout="image1.style.visibility='hidden';">画像1</a>

画像の変化だけで、ジャンプさせたくない場合は、「href="(ジャンプ先)"」のところを「href="Javascript:"」と記述しておきます。

もし、あなたが通常の文字上で画像の表示非表示をしたければspanタグを使って、次のように記述します。
<span onmouseover="image1.style.visibility='';" onmouseout="image1.style.visibility='hidden';">画像1</span>

【記述サンプル】
今回のサンプルで、画像に付けてる名前は「image1」、「image2」、「image3」、「image4」の順で、次のように記述しています。
<img name="image1" src="/images/top/menut0_02.png" alt="トップ" width="40" height="16" style="visibility:hidden">
<img name="image2" src="/images/top/menut0_03.png" alt="新着情報" width="59" height="16" style="visibility:hidden">
<img name="image3" src="/images/top/menut0_02.png" alt="トップ" width="40" height="16" style="visibility:hidden">
<img name="image4" src="/images/top/menut0_03.png" alt="新着情報" width="59" height="16" style="visibility:hidden">

また、Aタグを使用した記述は、
<a href="Javascript:" onmouseover="image1.style.visibility='';" onmouseout="image1.style.visibility='hidden';">画像1</a><br>
<a href="Javascript:" onmouseover="image2.style.visibility='';" onmouseout="image2.style.visibility='hidden';">画像2</a>

で、spanタグは、次のように記述しています。
<span onmouseover="image3.style.visibility='';" onmouseout="image3.style.visibility='hidden';">画像1</span><br>
<span onmouseover="image4.style.visibility='';" onmouseout="image4.style.visibility='hidden';">画像2</span>

スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom