ズームビューのアイコンエフェクト

ズームインジケーターは、ズームビュー領域に重ねて表示されます。 これは画像がリセット状態のときに表示され、 iconeffectパラメーターの設定にも依存します。

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

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

.s7mixedmediaviewer .s7zoomview .s7iconeffect

CSSプロパティ

説明

background-image

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

background-position

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

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

width

ズームインジケーターの幅。

height

ズームインジケーターの高さ

メモ

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

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

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

このページ