画像マップエフェクト image-map-effect
モードパラメーターの値に応じて、ビューアは、Dynamic Media Classicでマップが作成された場所に画像マップアイコンをメインビュー上に表示したり、元の画像マップの形状に一致する正確なリージョンをレンダリングしたりします。
メイン ビューア領域のCSS プロパティ
画像マップアイコンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon
NOTE
過去に画像マップアイコンのスタイル設定に使用されていた
s7mapoverlay CSS クラスは現在では非推奨です。代わりにs7iconを使用してください。CSS プロパティ
説明
背景画像
画像マップアイコンアートワーク。
background-position
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
幅
画像マップアイコンの幅（ピクセル単位）。
の高さ
画像マップ アイコンの高さ（ピクセル単位）。
NOTE
画像マップアイコンは、
state属性セレクターをサポートしています。このセレクターを使用すると、様々なスキンをdefaultとactiveのアイコン状態に適用できます。例 – 28 x 28 ピクセルの画像マップアイコンを設定し、2つの異なるアイコンの状態ごとに異なる画像を表示します。
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon {
height: 28px;
width: 28px;
background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon[state="default"] {
opacity: 0.5;
}
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon[state="active"] {
opacity: 1;
}
画像マップのサポート も参照してください。
画像マップ領域のアピアランスは、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7imagemapeffect .s7region
CSS プロパティ
説明
背景
画像マップ領域の塗りつぶしカラー。
#RRGGBB、RGB（R,G,B）またはRGBA （R,G,B,A）フォーマットで指定します。
背景色
画像マップ領域の塗りつぶしカラー。
#RRGGBB、RGB（R,G,B）またはRGBA （R,G,B,A）フォーマットで指定します。
境界線
画像マップ領域の境界線スタイル。
width solid color として指定されます。ここで、 width はピクセルで表され、 color は#RRGGBB、RGB（R,G,B）またはRGBA （R,G,B,A）として設定されます。
例 – 1 ピクセルの黒い境界線を持つ透明な画像マップ領域を設定します。
.s7ecatalogsearchviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref