画像マップエフェクト

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

メインビューア領域の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プロパティ

説明

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,B)またはRGBA(R,G,B,A)です。

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

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

このページ