CS-Cart3 画像リンクをオンマウスで変更

CS-Cart3でjQuery.rollover.jsを使ってオンマウスで画像変更する。

■用意するモノ
jQuery.rollover.js
　/lib/js/jqueryrollover/jquery.rollover.js

■作るモノ
jqueryrolloverディレクトリ（名前はjqueryrolloverでなくてもOK）
　/lib/js/jqueryrollover

rollover_id.jsファイル（名前はrollover_id.jsでなくてもOK）
　/lib/js/jqueryrollover/rollover_id.js

hookディレクトリ類（Basicスキンを使っている場合＆カスタマー画面）
　/skins/basic/customer/addons/my_changes

　/skins/basic/customer/addons/my_changes/hooks

　/skins/basic/customer/addons/my_changes/hooks/index

　※my_changes含め、下層の名前は固定。変更しちゃダメ。

script.override.tpl

　/skins/basic/customer/addons/my_changes/hooks/index/script.override.tpl
　※名前は変更しちゃダメ（状況に応じて「override」は変更可）。

■作り方

1.script.override.tplに以下のように記述する

{script src="lib/js/jqueryrollover/jquery.rollover.js"}
{script src="lib/js/jqueryrollover/rollover_id.js"}

2.rollover_id.jsに以下のように記述する

jQuery(function($) {$('#hogehoge a img').rollover();});

3.完成。

ディレクトリ名、ファイル名を変更している場合は、script.override.tplの記述内容を変更したディレクトリ名、ファイル名に変更すること。

#hogehogeは、オンマウスで画像を変更させたい部分のID。なので、#contentsとか#wrapperとか#totopとか、状況に応じたID名を記述。
クラスの場合も.menuとか記述すればOK。下記のように複合（ID：hogehogeとクラス：fugafuga）も可。

jQuery(function($) {$('#hogehoge a img, .fugafuga a img').rollover();});

この辺はCS-Cartじゃなくてjquery.rollover.jsの話なので割愛。

■説明しなさいよ、という人のための説明
まず、ヘッダにjquery.rollover.jsとrollover_id.jsを読み込む。
スクリプト類は、
　/skins/basic/customer/index.tpl
の中で、
　{include file="common_templates/scripts.tpl"}
というように呼ばれている。

scripts.tplに直接追記しても、もちろん動くけども、CS-Cartでは、フックポイントを利用するのが正しい方法。フックポイントを利用すれば、本体のバージョンアップなどでファイルが上書きされても、影響を受けない（らしいよ）。

　/skins/basic/customer/common_templates/scripts.tpl
では、最後にフックポイントがあるので、これを利用して追記する。

・scripts.tpl内のフックポイント
　{hook name="index:scripts"}
　{/hook}

nameが「index:scripts」なので、変更するファイルは
　/skins/basic/customer/addons/my_changes/hooks/index/script.override.tpl
に作る必要がある。

script.override.tplには、読み込むjsファイルを記述する。
ここではjquery.rollover.jsと、読み込む画像の条件を記述したrollover_id.jsの二つを記述。
このファイルが正しく読み込めていれば、ソースのヘッダに

が表示される。

次に、rollover_id.jsに、オンマウスで画像を変更したい場所を記述する。
サイト全体にやりたければ、

body a img

とする。
細かい設定内容については、本家サイトで確認をおすすめ。

画像変更する方法は「jQuery.rollover.js」を使う以外にもたくさんあるけれど、jQuery.rollover.jsは、「このIDだけ」「このクラスだけ」というように細かく部分指定できるので重宝します。
また、フォームにも対応しているのが便利。
画像の名前も_on以外にも自由に設定できることなども便利ポイント。