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