マウスオーバー(ホバー)で画像が変わる

ホームページ作成教室, 画像編集

今回はマウスホバーで画像が変わる記述をご説明。

やり方はCSSを使用するやり方や

htmlの記述 <img>+Javascript(src属性の置き換え)

などありますが

今回は初心者向けに分かりやすく

通常時とホバー時の画像を作成し置き換える方法を書きます。

<a href="#">
<img src="画像1" width="200" height="60" alt="サンプル" 
onmouseover="this.src='画像2'" onmouseout="this.src='画像1'">
</a>

画像1は通常の時でマウスホバーにより画像2に変わります。

サンプル

サンプル

もちろん全く違う画像もできます。
今回は画像を二つ用意したhtml記述のみの方法をお伝えしました。
メニューなど複数の画像の入れ替えになると
6項目なら12個用意しなければならないのが少し難点・・・。

次の機会に
この12個を一つの画像にすべて並べて座標を使った
表示の置き換え方法を書いてみたいと思います。