フライアウトズームビュー flyout-zoom-view

メインビューは、静的な画像と、フライアウトビューに表示されるズームされた画像で構成されます。 また、静的画像上に表示されるハイライトナビゲーション領域と、静的画像上に表示されるヒントメッセージも含まれます。

表示されている画像の寸法がフライアウトズームビューの寸法と一致しない場合、画像コンテンツはフライアウトズームビューの長方形表示領域の中央に配置されます。

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

メインビューの外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7flyoutzoomview

例 – メインビューを透明にするには：

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

フライアウトビューの CSS プロパティ

フライアウト表示の外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

例 – 前述の例に示すように、フライアウト表示を 600 x 400 ピクセルに設定し、512 x 288 のメイン表示の右側に 100 ピクセルのオフセットで表示するには、次のようにします。

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

メインビューのハイライト表示の CSS プロパティ

メインビューでのハイライトの外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7flyoutzoomview .s7highlight

CSS を使用して、背景、境界線、透明度などの属性を制御できます。 ただし、ハイライト表示の DOM 要素のサイズと位置は、ビューアのロジックによって管理されます。 CSS による上書きはサポートされていません。

例 – 40% の透明度と 1 ピクセルの赤い境界線を持つ緑のハイライトを設定するには：

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

カーソルの CSS プロパティ

パラメーター highlightmode cursor に設定すると、メインビューのハイライト表示は固定サイズのカーソルアートワークに置き換えられ、CSS クラスセレクターで制御されます。

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

CSS を使用して背景画像とサイズを制御することができます。

適用可能な CSS プロパティは次のとおりです。

オーバーレイの CSS プロパティ

overlay パラメーターを 1 に設定すると、ハイライトフレームまたはカーソル画像の周囲の領域が、CSS クラスセレクターで制御されます。

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

Tip メッセージの CSS プロパティ

先端メッセージの外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

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

例 – 白い Arial® 12 ピクセルのフォント、メインビューの下部からの 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);
}