1　下記フォルダとファイルを作成する。
■html/js/jquery.rollover/rollover.js

[php]
// ロールオーバー
jQuery(function($) {
var postfix = ‘_on’;
$(‘.j_roll a img’).not(‘[src*=”‘+ postfix +’.”]’).each(function() {
var img = $(this);
var src = img.attr(‘src’);
var src_on = src.substr(0, src.lastIndexOf(‘.’))
+ postfix
+ src.substring(src.lastIndexOf(‘.’));
$(‘‘).attr(‘src’, src_on);
img.hover(function() {
img.attr(‘src’, src_on);
}, function() {
img.attr(‘src’, src);
});
});
});
[/php]

2　■data/Smarty/templates/default/frontparts/bloc/site_frame.tplに追加する。

[php]


[/php]

（1）初期表示の画像に「_on」が付いている画像がロールオーバーで表示される。
logo.jpgに対して、logo_on.jpgを用意する。

（2）「_on」が付いている画像が初期表示されている場合はロールオーバーは無視される。

（3）画像はプリロードされるので、すぐに反応する。

（4）画像の拡張子は問わない。

（5）適用したい画像を含む要素にclass属性で値を「j_roll」と指定する。 class=”j_roll”>ここに記述した画像が、ロールオーバーの対象になる