1 ロールオーバーの仕組み
（1）EC-CUBEで使用されているロールオーバーを、ロゴに適用しようとすると次のようになる。
画像ごとに下記の記述を行うのはとても面倒。
<h1>
<a href="<!--{$smarty.const.TOP_URLPATH}-->" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/logo_on.gif','logo');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/logo.gif','logo');"><img src="<!--{$TPL_URLPATH}-->img/common/logo.gif" alt="EC-CUBE ONLINE SHOPPING SITE" name="logo" id="logo" />
<span><!--{$arrSiteInfo.shop_name|h}-->/<!--{$tpl_title|h}--></span>
</a>
</h1>
（2）jQueryロールオーバーを利用すると、下記のような簡単なコードになる。
というか、
タグの属性に、class=”j_roll”を追加しているだけ。
<h1 class="j_roll">
<a href="<!--{$smarty.const.TOP_URLPATH}-->"><img src="<!--{$TPL_URLPATH}-->img/common/logo.gif" alt="EC-CUBE ONLINE SHOPPING SITE" />
<span><!--{$arrSiteInfo.shop_name|h}-->/<!--{$tpl_title|h}--></span>
</a>
</h1>
（3）上記コードには記述されていないが、logo_on.gifという画像を新たに作り、logo.gifと同じフォルダ（common）に置くことが必要。
（4）「_on」が付いている画像が初期表示されている場合はロールオーバーは無視される。
（5）画像はプリロードされるので、ロールオーバーの反応がはやい。
2 ロゴにロールオーバーを適用する。
（1）■html/js/jquery.rollover/rollover.jsを作成する。
// ロールオーバー
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('.'));
$('<img>').attr('src', src_on);
img.hover(function() {
img.attr('src', src_on);
}, function() {
img.attr('src', src);
});
});
});
（2）■data/Smarty/templates/default/site_frame.tplに追加する。
<!--▼ロールオーバー-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.rollover/rollover.js"></script>
（3）■img/common/logo_on.gifを作成する。
（4）■data/Smarty/templates/default/header.tpl
タグの属性に、class=”j_roll”を追加する。
<h1 class="j_roll">
