ロールオーバー

a-blog cmsでは、画像をロールオーバーする（hover時の画像切り替え）設定が標準で実装されています。（v1.2.1より）マウスカーソルを画像にhoverしたとき、画像ファイルの名前が自動で切り替わることでロールオーバーが実現できます。Webサイトのナビゲーション画像を切り替える場合などに利用できます。

デモ

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

rolloverImgMark    : 'img.js-rollover, img.imgover',
rolloverImgSuffix  : '_o',

---

---

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.rolloverImgMark = 'img.js-sample-rollover, img.js-sample-imgover';
  ACMS.Config.rolloverImgSuffix =  '_sample'
});

使い方

config.jsで指定した要素・属性をHTMLに記述します。

例）rolloverImgMarkを「img.js-rollover」、rolloverImgSuffixを「_o」と指定した場合

通常時（テンプレートに記述するソース）：

<img src="xxx.gif" alt="xxx" width="100" height="15" class="js-rollover" />

ロールオーバー時（表示画面上でのソース）：

<img src="xxx_o.gif" alt="xxx" width="100" height="15" class="js-rollover" />

---