ホットスポットと画像マップ hotspots-and-image-maps

ビューアには、ホットスポットが元々AEM AssetsのDynamic Mediaで作成された場所にあるホットスポットアイコンがメインビューの上にオンデマンドで表示されます。

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

ホットスポットアイコンの外観は、次の CSS クラスセレクターで制御します。

.s7carouselviewer .s7imagemapeffect .s7icon
CSS プロパティ
説明
background-image
ホットスポットアイコンのアートワーク。
background-position

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

CSS スプライト 関するを参照してください。

ホットスポットアイコンの幅。
高さ
ホットスポットアイコンの高さ。

例 – 2 つの異なるアイコンの状態のそれぞれに異なる画像を表示する、56 x 56 ピクセルのホットスポットアイコンを設定します。

.s7interactiveimage .s7imagemapeffect .s7icon {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
 width: 56px;
 height: 56px;
}
.s7interactiveimage .s7imagemapeffect .s7icon:hover {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

画像マップ領域の CSS プロパティ

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

.s7carouselviewer .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 ピクセルの黒い境界線を持つ透明画像マップ領域を設定する

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