ロールオーバーを使ったメニューの作り方

デザイン

JavaSciptを使ってスムーズに画像を切替えます。
cssだけでは画像の切替時にちらつきが出てしまうのを防ぐことができます。


参考サイト
http://www.coolwebwindow.com/weblife_column/coolweb/000128.php

1、http://jquery.com/から、jquery.jsを取得し、jquery.jsと名づけて保存する。

2、


function initRollOverImages() {
var image_cache = new Object();
$("img.swap").each(function(i) {
var imgsrc = this.src;
var dot = this.src.lastIndexOf('.');
var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
image_cache[this.src] = new Image();
image_cache[this.src].src = imgsrc_on;
$(this).hover(
function() { this.src = imgsrc_on; },
function() { this.src = imgsrc; });
});
}

$(document).ready(initRollOverImages);

これをrollover.jsと名前を付けて保存。


3、htmlの設定


をメタに追加する。順番はこの通り。

4、切り替えたい部分の設定は
・ロールオーバーしたいimgタグに「class="swap"」を追加すること。
・マウスオン画像はマウスオフ画像に "_on" をつけたものにすること。

これでOKみたいです。化粧品サンプルに設定したらできたので大丈夫。
すごく便利。