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

まず、各項目の on , off 画像を格納した image オブジェクトを最初に作成します。
この変数名は、HTML の変更対象の img タグの id の値_on(もしくはoff)という命名規則とします。

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

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


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


■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');
}
}

by jehoshaphat | 2009-03-02 22:53 | Webがらみ


<< (.Net,C++)Proce... (.Net)mailtoの文字... >>