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>