ホットスポットと画像マップ

メイン表示の上に、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プロパティ

説明

background

画像マップ領域の塗りのカラー

この色は、 #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,Gb) または RGBA(R,G,B,A)

例 — 1ピクセルの黒い境界線の透明な画像マップ領域を設定します。

.s7carouselviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}

このページ