システム開発研究所YOUJIN > ロールオーバー

Javascript

画像のロールオーバーが簡単に設定できる! 
ロールオーバーJavascript 

ロールオーバーとは、例えばwebサイトのメニュー画像にマウスカーソルを合わせると、その画像が切り替わる・・・といった動きの事です。もっと簡単に説明すると、下記のメニュー画像がそれです。

Javascript素材マウスをメニューの上に載せてみてください。こんな感じです!
これは2枚の画像が切り替わっているだけです。これは非常にシンプルな動きの、ごく基本のロールオーバーです。作りやすい上に、管理も容易ですので、お勧めです。

HELP/設置方法その1

まずはJavascriptファイルを外部リンクさせてください。

<script type=”text/javascript” src=”http://sample.com/js/rollover.js“></script>  

HELP/設置方法その2

切り替える2枚の画像のファイル名に、「_on」と「_off」をお尻につけて下さい。
もちろんjpgでもpngでも大丈夫です。 

(例) sample_on.gif と sample_off.gif 

HELP/設置方法その3

「_off」のファイル名の方の画像をHTMLに掲載してください。
その画像ソースに「class=”rollover”」を加えるだけでOK。

(例) <img src=”http://sample.com/sample_off.gif” class=”rollover” />

DOWNLORD/ダウンロードはこちら

ダウンロードロールオーバーJacascript

webサイト構築においては、ロールオーバーというのはもう初級中の初級の技で、Dreamwerver等のホームページ作成ソフトを使えば簡単に設置できます。ですが、このロールオーバーはヘッダーにJavascriptを書かないという点と、bodyタグにプリロードの記述をしないという事、そしてロールオーバーさせたい画像のタグにクラスを書くだけでOKなので、ソースが複雑にならず、大量のページ構成になったとしても綺麗に管理できます。