フライアウトズームビュー 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 による上書きはサポートされていません。
ハイライトの不透明度
Internet Explorer 8 の場合は、 filter:alpha(opacity-...);
例 — 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 プロパティは次のとおりです。
input
属性セレクター。デバイスごとに異なるカーソルのアートワークやサイズを適用するのに使用できます。 特に input="mouse"
デスクトップシステムに対応し、 input="touch"
は、タッチデバイスに対応します。オーバーレイの CSS プロパティ
次の場合に overlay
パラメーターが 1
に指定する場合、ハイライトフレームまたはカーソル画像の周囲の領域は、CSS クラスセレクターを使用して制御します。
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
ヒントメッセージの CSS プロパティ
ヒントメッセージの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7flyoutviewer .s7flyoutzoomview .s7tip
CSS を使用して、フォントスタイル、サイズ、外観、垂直方向のオフセットを設定できます。 ただし、水平方向の位置揃えはビューアのロジックで管理します。 を使用した CSS による上書き left
または right
プロパティはサポートされていません。
メッセージテキストの背景の不透明度。
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);
}