アイコンエフェクト

ズームインジケーターは、メイン表示領域に重ねて表示されます。 画像がリセット状態の場合に表示されます。また、iconeffectパラメーターの設定によって表示されます。

表示領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7pageview .s7iconeffect

CSSプロパティ

説明

background-image

ズームインジケーターのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

width

ズームインジケーターの幅(ピクセル単位)

height

ズームインジケーターの高さ(ピクセル単位)

メモ

アイコンエフェクトでは、media-type属性セレクターがサポートされます。このセレクターを使用すると、デバイスごとに異なるアイコンエフェクトを適用できます。 特に、media-type='standard'はマウス入力が通常使用されるデスクトップシステムに対応し、media-type='multitouch'はタッチ入力のデバイスに対応します。

例 — デスクトップシステムとタッチデバイスで別々のアートを使用する100 x 100ピクセルのズームインジケーターを設定するには、次のように記述します。

.s7ecatalogviewer .s7pageview .s7iconeffect { 
 width: 100px; 
 height: 100px; 
} 
.s7ecatalogviewer .s7pageview .s7iconeffect[media-type='standard'] { 
 background-image:url(images/v2/IconEffect_zoom.png); 
} 
.s7ecatalogviewer .s7pageview .s7iconeffect[media-type='multitouch'] { 
 background-image:url(images/v2/IconEffect_pinch.png); 
}

このページ