ITOBEN STYLE > jQueryによる画像のロールオーバーを実装 2011年7月8日カテゴリー:未分類 jQueryによる画像のロールオーバーを実装 【環境】PHP：5.2.14，MySQL：5.5.13，Legacy：2.2.0 画像ごとにロールオーバーを設定するのは面倒なので，下記方法を利用する。 ロールオーバーを表示したい場合は2つの画像を用意する。→「abc.jpg」「abc_on.jpg」 abc.jpgにマウスポインタを当てると，同じファイル名に_onが付いている画像を表示し，マウスポインタを外すと_onが付いていない画像に戻る，という具合。 ①common/js内のjquery.jsをリンクする。 ［互換レンダーシステム］→［jQuery コアライブラリ］に「http://www.○○○.com/common/js/jquery.js」と入力 ②使用中のテーマ内のtheme.htmlのヘッダ部に下記を追記する。 ************************************************************ ************************************************************ 上の5行目，「#○○」は，指定したい箇所に変更する。 たとえば， 内の画像に適用したいのであれば，「#content」となる。 .not(‘[src*=”‘+ postfix +’.”]’).により，初めから_on付きの画像があっても，それにはロールオーバーが適用されない。 ★theme.htmlをFTP等でアップロードしても，変更が反映されないときは， ［互換モジュール］→［全般設定］の「themes/ ディレクトリからの自動アップデートを有効にする」で「はい」を選択する。
【環境】PHP：5.2.14，MySQL：5.5.13，Legacy：2.2.0
画像ごとにロールオーバーを設定するのは面倒なので，下記方法を利用する。
ロールオーバーを表示したい場合は2つの画像を用意する。→「abc.jpg」「abc_on.jpg」
abc.jpgにマウスポインタを当てると，同じファイル名に_onが付いている画像を表示し，マウスポインタを外すと_onが付いていない画像に戻る，という具合。
①common/js内のjquery.jsをリンクする。
［互換レンダーシステム］→［jQuery コアライブラリ］に「http://www.○○○.com/common/js/jquery.js」と入力
②使用中のテーマ内のtheme.htmlのヘッダ部に下記を追記する。
************************************************************
************************************************************
上の5行目，「#○○」は，指定したい箇所に変更する。
たとえば，
.not(‘[src*=”‘+ postfix +’.”]’).により，初めから_on付きの画像があっても，それにはロールオーバーが適用されない。
★theme.htmlをFTP等でアップロードしても，変更が反映されないときは，
［互換モジュール］→［全般設定］の「themes/ ディレクトリからの自動アップデートを有効にする」で「はい」を選択する。