mode パラメーターの値に応じて、ビューアは、Dynamic Media Classicでマップが最初に作成された場所のメインビュー上に画像マップアイコンを表示します。 または、元の画像マップの形状と一致する正確な領域をレンダリングします。
メインビューア領域の CSS プロパティ
画像マップアイコンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogviewer .s7imagemapeffect .s7icon
この s7mapoverlay
以前に画像マップアイコンのスタイル設定に使用されていた CSS クラスは、非推奨(廃止予定)となりました。use 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);
}