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

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

このページ