画像のロールオーバー - 長井・NetCommons練習サイト

ボタン（画像）のロールオーバー

ロールオーバーは、マウスが画像に重なった時（マウスオーバー）、別の画像を表示し、マウスが離れたとき（マウスアウト）、元の画像に戻す。
NetCommonsで画像のロールオーバーを行うには、通常の方法だと画像にJavaScriptでイベント発生時に関数を実行させてロールオーバーさせるケースが多い。この方法だとNetCommonsのデザインカストマイズを正確に行わないと大トラブルとなる。このサイトもJavaScriptの構文ミスで「ログイン」出来なくなり、サイトの再作成の憂き目を見ている。
ここでは、デザインカストマイズを行わず、HTML編集とちょっとした工夫でボタンのロールオーバーが出来る方法を記述している。

１．表示する画像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が表示されない分だけ見やすくしている。

NetCommons Test and Study Site