画像マップエフェクト image-map-effect

mode パラメーターの値に応じて、ビューアは画像マップアイコンをDynamic Media Classicでマップが最初に作成された場所のメインビューに表示します。 または、元の画像マップの形状に一致する正確な領域をレンダリングします。

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

画像マップアイコンの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7imagemapeffect .s7icon
NOTE
過去に画像マップアイコンのスタイル設定に使用されていた s7mapoverlay CSS クラスは非推奨(廃止予定)になりました。代わりに s7icon を使用します。
CSS プロパティ
説明
background-image
画像マップ アイコン アートワーク。
background-position

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

CSS スプライト ール 参照してください。

画像マップアイコンの幅(ピクセル単位)。
高さ
画像マップアイコンの高さ(ピクセル単位)。
NOTE
画像マップアイコンは、state 属性セレクターをサポートしています。このセレクターを使用して、defaultactive のアイコン状態に異なるスキンを適用できます。

例 – 28 x 28 ピクセルの画像マップアイコンを設定します。このアイコンは、2 つの異なるアイコン状態のそれぞれに異なる画像を表示します。

.s7ecatalogviewer .s7imagemapeffect .s7icon {
 height: 28px;
 width: 28px;
 background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="default"] {
 opacity: 0.5;
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="active"] {
opacity: 1;
}

画像マップのサポートも参照してください。

画像マップ領域の外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7imagemapeffect .s7region
CSS プロパティ
説明
background

画像マップ領域の塗りつぶしの色。

#RRGGBB、RGB(R,G,B)または RGBA (R,G,B,A)のフォーマットで指定します。

の背景色の

画像マップ領域の塗りつぶしの色。

#RRGGBB、RGB(R,G,B)または RGBA (R,G,B,A)のフォーマットで指定します。

境界線

画像マップ領域の境界線のスタイル。

幅 単色 色 として指定します。 幅 はピクセルで表され、 色 は#RRGGBB、RGB(R,G,B)または RGBA (R,G,B,A)に設定されます。

例 – ピクセルの黒い境界線を持つ透明画像マップ領域 1 設定する

.s7ecatalogviewer .s7imagemapeffect .s7region {
 border: 1px solid #000000;
 background: RGBA(0,0,0,0);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8