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

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

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

このサンプルは画像を本格的に表示非表示します
したがって、前回と違い画像領域も消えますので、自動的に文字が詰まったり、行数が詰まったりします。
ですからそれに続く文字などが上下左右に伸びたり縮んだりします。

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

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

◆ 実行サンプル


【リンク文字の場合】
画像1
画像2
トップ 新着情報
【spanタグの場合】
画像1
画像2
トップ 新着情報

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

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

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

と記述します。

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

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

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

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

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

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

と記述します。

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

と記述しておきます。

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

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

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

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

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

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

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

page update:2019/01/09 19:55

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