マウスオーバー/マウスアウト(mouseover/mouseout)

プロパティー:マウスオーバー/マウスアウト(mouseout/mouseover)は基本的にカーソルを画像やテキストの上に置いたときに内容を変化させるときに使用します。文字が変わったり、文字色が変わったり、背景色が変わったり、違う画像に変わったり・・・・いろいろですね。

今回は、イメージ画像やテキスト部分をオーバーしたとき、違う画像に変わる、テキスト文の場合は背景色にかわるような書き方を記しておきます。
<通常>

リンクバナーをロールオーバーした際に画像を変化させるには、、、、

画像の場合は

<a href=”” target=””><img src=”” alt=””></a>

テキストの場合は

<a href=”” target=””>テキスト文</a>

ですが、

<マウスオーバー/マウスアウト>

  マウスオーバー前の画像(表紙)と、マウスオーバーしたときの画像(背景)の2つの画像ファイルを用意します。

<書く場所は親要素か子要素か>

マウスカーソルがすでに親要素にあり、そこから重なっている子要素に移った場合、子要素はもちろん、親要素にも再びmouseoverイベントが発生する。
子要素から重なっている部分の親要素に移った場合、親要素にmouseoverイベントが発生し、その際、子要素だけでなく親要素にもmouseoutイベントが発生する。つまり、親要素ではそれぞれをまったく同一の領域として扱われます。

子要素が親要素の領域を切り取ると考えるとわかりやすいですね。

・子でmouseover => 親でもmouseover

・子でmouseout => 親でもmouseout

~応用~
<inputボタンにマウスオーバー/マウスアウト>
<input type=”image” name=”test” src=”” onmouseover=”” onmouseout=”” />

参考URLはこちら
http://kowaza.boo.jp/06mouse/onm-01font.html

マウスオーバーはユーザーがサイト閲覧時に、有効な知識だと思います。オーバーアクションは結果誘導効果に使えますので意識しておきましょう。

PS:こんなアプリをつかってみました
【音声認識装置HD】~現在ipadで無料(iphoneでは有料になっちゃってます)~
https://iwire.jp/appch/apps/550295585/

結果・・・・わけわからない文章になったwwwww自分の声がいかに聞き取りづらいのかとかなり傷心しました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です