ホームページ作り－ロールオーバー

マウスを乗せると画像が変わるロールオーバーの作り方。

マウスを乗せると画像が変わるボタンなどをよく見かけると思います。これはロールオーバーと呼ばれる技術です。 HPWでは簡単にロールオーバーを作成できます。

ロールオーバーの例

マウスを乗せると画像が変わります。

まずマウスを乗せる前の画像と、乗せた時の画像の２つを準備します。上記の例では下の2種類の画像を使っています。


roll1.gif	roll2.gif

次に、ツールボタンの画像をクリックして、イメージフォームを出します。上部の参照ボタン「…」を押して、マウスを乗せる前の画像を選択します。次にフォーム下部のロールオーバー画像を設定するにチェックを入れ、 参照ボタン「…」からマウスを乗せた時に表示する画像を入れます（下図）。

これでＯＫボタンを押すと下のような長いタグが入ります（ページ横幅の関係上折り返しています）。

<img src="img/roll1.gif" width="90" height="22" border="0" alt=""
 onmouseover="this.src='img/roll2.gif'"
 onmouseout="this.src='img/roll1.gif'">

詳しい説明は省きますが、onmouseover属性で表示する画像のsrc（相対パス）を入れ替えている訳です。このような長いタグを必要とするロールオーバーですが、 HPWでは簡単に挿入できるので便利です。