フライアウトズーム表示 flyout-zoom-view

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

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

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

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

.s7flyoutviewer .s7flyoutzoomview

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

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

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

フライアウトビューの外観は、次のCSS クラスセレクターで制御されます。

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

例 – 前の例で示した512 x 288のメインビューの右側に100 ピクセルがオフセットされたフライアウトビューを600 x 400 ピクセルに設定するには：

.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

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

チップメッセージの外観は、次のCSS クラスセレクターで制御されます。

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

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

例 – 白い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);
}