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