ビューアには、AEM AssetsのDynamic Mediaでホットスポットが最初にオーサリングされたオンデマンドの場所に、メインビューの上にホットスポットアイコンが表示されます。
メインビューア領域のCSSプロパティ
ホットスポットアイコンの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7carouselviewer .s7imagemapeffect .s7icon
CSSプロパティ |
説明 |
---|---|
background-image |
ホットスポットアイコンのアートワーク。 |
background-position |
CSSスプライトを使用する場合は、アートワークスプライト内に配置します。 CSSスプライトを参照してください。 |
width |
ホットスポットアイコンの幅。 |
height |
ホットスポットアイコンの高さ |
例 — 56 x 56ピクセルのホットスポットアイコンを設定し、2つの異なるアイコンの状態ごとに異なる画像を表示します。
.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プロパティ |
説明 |
---|---|
背景 |
画像マップ領域の塗りのカラー この色は、 #RRGGBB 、 RGB(R,G,B) または RGBA(R,G,B,A) 形式で指定します。 |
background-color |
画像マップ領域の塗りのカラー この色は、 #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);
}