ロールオーバー(js-rollover)

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

デモ

デモ画像

デフォルトの設定

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

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


rolloverImgMark ロールオーバーを適用させるセレクタを指定します。
rolloverImgSuffix ロールオーバー時に表示する画像ファイル名の末尾に付与される接尾辞です。

設定のカスタマイズ

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" />