フライアウトズームビュー

メインビューは、静的画像と、静的画像の上にあるフライアウトビューに表示されるズームされた画像で構成されます。 また、静的な画像の上に表示されるヒントメッセージで構成されます。

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

メインビューの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7flyoutviewer .s7flyoutzoomview

CSS プロパティ

説明

background-color

メインビューの背景色。

例 — メインビューを透明にするには、次のように記述します。

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

ヒントメッセージの CSS プロパティ

ヒントメッセージの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7flyoutviewer .s7flyoutzoomview .s7tip

CSS を使用して、フォントスタイル、サイズ、外観、垂直方向のオフセットを設定できます。 ただし、水平方向の位置揃えはビューアのロジックで管理します。 を使用した CSS による上書き left または right プロパティはサポートされていません。

CSS プロパティ

説明

下

メインビューの下部からのオフセット。

color

テキストの色。

font-family

フォント名。

font-size

フォントサイズ。

パディング

メッセージテキストの周囲のパディング。

background-color

メッセージテキストの背景の塗りのカラー。

border-radius

メッセージテキストの背景の境界線の半径。

不透明度

メッセージテキストの背景の不透明度。

Internet Explorer 8 の場合は、 filter:alpha(opacity-...) )

ヒントメッセージはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。

.

例 — 半透明のチップメッセージを、白い Arial® 12-px フォント、メインビューの下から 50 ピクセルのオフセット、パディング、丸めた境界線付きで設定するには、次のように記述します。

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}

このページ