EC-CUBEのボタンなどに使用されているロールオーバーの方法を、ロゴに適用すると下記のようなコードになる。ちょっと面倒。
<h1>
<a href="<!--{$smarty.const.HTTP_URL}-->" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/logo_on.jpg','logo');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/logo.jpg','logo');"><img src="<!--{$TPL_URLPATH}-->img/common/logo.jpg" alt="トップページ" name="logo" id="logo" />
<span><!--{$arrSiteInfo.shop_name|h}-->/<!--{$tpl_title|h}--></span>
</a>
</h1>
これを、jQueryを利用することで、下記のようにコードを簡単にできる。
<h1 class="j_roll">
<a href="<!--{$smarty.const.HTTP_URL}-->"><img src="<!--{$TPL_URLPATH}-->img/common/logo.jpg" alt="トップページ" />
<span><!--{$arrSiteInfo.shop_name|h}-->/<!--{$tpl_title|h}--></span>
</a>
</h1>
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/frontparts/bloc/site_frame.tplに追加する。
<!--▼ロールオーバー-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.rollover/rollover.js"></script>
（1）初期表示の画像に「_on」が付いている画像がロールオーバーで表示される。
logo.jpgに対して、logo_on.jpgを用意する。
（2）「_on」が付いている画像が初期表示されている場合はロールオーバーは無視される。
（3）画像はプリロードされるので、すぐに反応する。
（4）画像の拡張子は問わない。
（5）適用したい画像を含む要素にclass属性で値を「j_roll」と指定する。
