アイコンエフェクト icon-effect

ズームインジケーターは、メインビュー領域にオーバーレイされます。 画像がリセット状態の場合に表示され、アイコンエフェクトパラメーターにも依存します。

メイン ビューア領域の​CSS プロパティ

表示領域の外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7pageview .s7iconeffect
CSS プロパティ
説明
背景画像
ズームインジケーターアートワーク。
background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

CSS スプライトも参照してください。

ズームインジケーターの幅(ピクセル単位)
の高さ
ズームインジケーターの高さ(ピクセル)。
NOTE
アイコンエフェクトはmedia-type属性セレクターをサポートしており、異なるデバイスに異なるアイコンエフェクトを適用するために使用できます。 特に、media-type='standard'は通常マウス入力が使用されるデスクトップシステムに対応し、media-type='multitouch'はタッチ入力を持つデバイスに対応します。

例 – デスクトップシステムとタッチデバイス用に、100 x 100 ピクセルのズームインジケーターを異なるアートで設定する場合。

.s7ecatalogsearchviewer .s7pageview .s7iconeffect {
 width: 100px;
 height: 100px;
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='standard'] {
 background-image:url(images/v2/IconEffect_zoom.png);
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='multitouch'] {
 background-image:url(images/v2/IconEffect_pinch.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref