フォーラム
お問い合わせ
最新版ダウンロードホーム > サポート・マニュアル > チュートリアル > 組み込みのJavascript > 画像にロールオーバー効果を付ける
a-blog cmsでは、画像をロールオーバーする（hover時の画像切り替え）設定が標準で実装されています。（v1.2.1より）
マウスカーソルを画像にhoverしたとき、画像ファイルの名前が自動で切り替わることでロールオーバーが実現できます。Webサイトのナビゲーション画像を切り替える場合などに利用できます。
画像にロールオーバー効果を付ける
1. 設定の編集
この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。
rolloverImgMark : 'img.js-rollover, img.imgover',
rolloverImgSuffix : '_o',
| rolloverImgMark | ロールオーバーを適用させるセレクタを指定します。 |
|---|---|
| rolloverImgSuffix | ロールオーバー時に表示する画像ファイル名の末尾に付与される接尾辞です。 |
2. HTMLの編集
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" />
このドキュメントと関連している内容のエントリー
- 関連度 2 : サムネイル画像を拡大表示させるイメージビューワー（Highslide JS）を利用する
- 関連度 1 : https関連のリンクを書き換える機能
- 関連度 1 : post includeの結果をキャッシュさせない方法
- 関連度 1 : カスタムフィールドでGoogle Mapsの入力インターフェースを実装する
- 関連度 1 : 特定の部分の表示／非表示をフェード効果で切り替える機能（js-fader）
ドキュメントの内容に関するお知らせフォーム
内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。
