HPの小技(マウスが当たると画像が変わる)

マウスが当たると画像が変わるHPって見たことありませんか? 企業のHPなどではよくありますね。ナローバンド時代では、画像読み込みの時間がかかりすぎて逆にわかりづらくなってしまってましたが、ブローバンドの普及した現代なら見た目をよくするのに十分、効果的でしょう。試しにいかがですか?

画像を切り替えるには、<IMG>タグを少しいじる必要があります。

これが通常の<IMG>タグ
<img src=\"イメージファイル名\">

そして、これがマウスが当たると変わる<IMG>タグ
<img src=\"イメージファイル名A\" onMouseOver=\"this.src=\’イメージファイル名B\’\" onMouseOut=\"this.src=\’イメージファイル名A\’\">

イメージファイル名Aは初期表示しているイメージファイル
イメージファイル名Bはマウスが当たったときに表示するイメージファイル

イメージファイル名Aを二回設定しているのは、初期状態とマウスが外れた時に戻すためです。

コメントを残す

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