(JavaScript)マウスオーバーしたら画像を差し替えるスクリプト

よく Web でメニュー画像等にマウスオーバーすると画像が変わるというのを見かけますが、あれを実現するために比較的な汎用スクリプトを作ってみました。(といって昔使ってたやつですが)

まず、各項目の on , off 画像を格納した image オブジェクトを最初に作成します。

この変数名は、HTML の変更対象の img タグの id の値_on(もしくはoff)という命名規則とします。

そして、On , Off というメソッドを作成し、これがマウスオーバーされたときの走るように、a タグのイベントハンドラに定義します。

このメソッドの引数は、変更対象の img タグの id の値にします。

コードはこんな感じです。

■HTML

 href="index.html" onmouseout="Off('home')" onmouseover="On('home')"> src="/image/btn_home_off.jpg" id="home"  />
 href="xxxx.html" onmouseout="Off('product')" onmouseover="On('product')"> src="/image/btn_product_off.jpg"  id="product"  />
 href="yyyy.html" onmouseout="Off('download')" onmouseover="On('download')"> src="/image/_btn_down_off.jpg" id="download" />

■JavaScript

//表示するイメージを格納した変数定義
if (document .images) {
     var home_on=new Image();
     home_on.src="/image/btn_home_on.jpg"; // ポイント時の画像
     var home_off=new Image();
     home_off.src="/image/btn_home_off.jpg"; // 通常の画像

     var product_on = new Image();
     product_on.src = "/image/btn_product_on.jpg";
     var product_off= new Image();
     product_off.src = "/image/btn_product_off.jpg";

     var download_on =  new Image();
     download_on.src = "/image/btn_down_on.jpg";
     var download_off =  new Image();
     download_off.src = "/image/btn_down_off.jpg";
}


// ポイント時の処理
function On(name) {
     if (document .images) {
          document .images[name].src=eval(name + '_on.src');
     }
}

// 放した時の処理
function Off(name) {
     if (document .images) {
          document .images[name].src=eval(name + '_off.src');
     }
}