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

メイン表示の上に、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);  
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now