modeパラメータの値に応じて、メイン表示の上の画像マップアイコンが、最初にDynamic Mediaクラシックでマップが作成された場所に表示されるか、元の画像マップの形状と一致する正確な領域がレンダリングされます。
メインビューア領域の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);
}