画像マップエフェクト

modeパラメータの値に応じて、ビューアは、Dynamic Media Classicでマップが最初に作成された場所にメインビューの上に画像マップアイコンを表示するか、元の画像マップの形状に一致する正確な領域をレンダリングします。

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

画像マップアイコンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7imagemapeffect .s7icon
メモ

以前の画像マップアイコンのスタイル設定に使用されていたs7mapoverlay CSSクラスは非推奨（廃止予定）となりました。代わりに、 s7iconを使用します。

CSSプロパティ

説明

background-image

画像マップアイコンのアートワーク。

background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトも参照してください。

width

画像マップアイコンの幅（ピクセル単位）

height

画像マップアイコンの高さ（ピクセル単位）。

メモ

画像マップアイコンでは、 state属性セレクターがサポートされます。このセレクターを使用して、アイコンの状態（defaultとactive）に異なるスキンを適用できます。

例 — 28 x 28ピクセルで、2つの異なるアイコン状態ごとに異なる画像を表示する画像マップアイコンを設定します。

.s7ecatalogviewer .s7imagemapeffect .s7icon { 
 height: 28px; 
 width: 28px;  
 background-image: url(images/v2/ImageMapEffect_dark_up.png); 
} 
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="default"] { 
 opacity: 0.5; 
} 
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="active"] { 
opacity: 1; 
}

画像マップのサポートも参照してください。

画像マップ領域の外観は、以下のCSSクラスセレクターを使用して制御します。

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

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

このページ