ズーム表示アイコンエフェクト

ズームインジケーターは、ズーム表示領域に重ねて表示されます。画像がリセット状態の場合に表示されます。また、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); 
}