１．表示する画像A（初期）を所定の位置に設置する。
２．マウスオーバー（マウスが画像に重なった時：onMouseOver)の別画像Bを設置する。
　　画像を挿入した状態では、画像Bがそのまま表示されてしまう。そこで、その画像を画面に非表示にするような設定を行う。
　　　＊　style="display:none;" を指定すれば、画像も表示されず、範囲も無いものとなる。
３．HTML編集画面にし、画像AとBの相対アドレスを取得する。
　　例）　/?action=common_download_main&upload_id=28"
　　　　　/?action=common_download_main&upload_id=29"
４．HTML編集で画像AにJavaScript文を入れる。
     onMouseover="this.src='./?action=common_download_main&upload_id=29"
     onMouseout="this.src='./?action=common_download_main&upload_id=28'"

＊　２．の画像Bを入れる場所として、この事例では、ダミーのページを作りそのページにアップしておき、メニューではダミーページを非表示にしている。これは、ページ編集時画像Bが表示されない分だけ見やすくしている。

上段メニューの「検索」のロールオーバーも同じ方法で表示している。