アイコンエフェクト icon-effect

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

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

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

.s7zoomviewer .s7zoomview .s7iconeffect
CSS プロパティ
説明
background-image
ズームインジケーターのアートワーク。
background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

詳しくは、 CSS スプライト.

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

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

.s7zoomviewer .s7zoomview .s7iconeffect {
 width: 100px;
 height: 100px;
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='standard'] {
 background-image:url(images/v2/IconEffect_zoom.png);
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='multitouch'] {
 background-image:url(images/v2/IconEffect_pinch.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8