アイコン効果

最終更新日： 2024年7月22日

トピック：

作成対象：

開発者
ユーザー

ズームインジケーターがメインの表示領域に重なります。画像がリセット状態の場合に表示され、iconeffect パラメーターにも依存します。

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

表示領域の外観は、次の CSS クラスセレクターで制御します。

.s7zoomviewer .s7zoomview .s7iconeffect

CSS プロパティ	説明
background-image	ズームインジケーターのアートワーク。
background-position	CSS スプライトを使用する場合、アートワークスプライト内に配置します。 CSS スプライトージ参照してください。
幅	ズームインジケーターの幅。
高さ	ズームインジケーターの高さ。

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