画像マップ効果

最終更新日： 2022-03-02
  • 作成対象：
  • Developer
    User

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);
}
前のページ
Next page

このページ