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

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

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

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

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

◆ 実行サンプル

【　解　　　　説　】

まず、画像にマウスが乗った場合の処理は、
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;">画像１</a>

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

もし、あなたが通常の文字上で画像の表示非表示をしたければ、spanタグを使って、次のように記述します。
<span onmouseover="image1.style.display='';" onmouseout="image1.style.display=none;">画像１</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';">画像１</a><br>
<a href="Javascript:" onmouseover="image2.style.display='';" onmouseout="image2.style.display='none';">画像２</a>

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

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