マウスカーソルが画像の上へ来たときに、画像の色を変えたり別画像にする手法を「ロールオーバー」という。
一般の解説は　→　ここを参照
この手法はJavaScript を使用したもので、ホームページ・ビルダーや、DreamWeaver の編集メニューから簡単に作ることができる。
リンクボタンに使うためには、各々のボタンに変化前後2つの画像を用意する必要がある。
しかし、例えば環境経営学会のホームページメニューでは、「HOME」「学会紹介」「事業内容」など多数のロールオーバーボタンが使われているが変色ボタンは１つだけで、メニューの追加修正が簡単にできるように工夫してある。

（1）通常のロールオーバーボタン
ボタンにマウスを乗せると、ボタンの色が変わる。　ボタンの数だけ必要。

00000

作成法：
Homepage Builder：　挿入　→　画像の効果　→　ロールオーバー効果
DreamWeaver ：　挿入　→　イメージオブジェクト　→　ロールオーバーイメージ

（2）ロールオーバー部分だけを分離したボタン
下、右側の「HOME」ボタンにマウスを乗せると、左のボタンの色が変わる。
左のボタンにマウスを乗せても変化なし。
このように、ロールオーバー部分を分離させれば各メニューの変色ボタンは一種類でいい。
作成法：　左のボタンをリンク設定せず、右ボタンを通常のリンク設定にするだけで簡単。

000000000000

00000

ここをクリック

応用例 (１)

　　

		応用例 (２)
000

（3）ロールオーバーの応用
ロールオーバーは、色変わりボタンだけではなく、通常の大きな画面変化にも使える。
　　例