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

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

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

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

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

.s7flyoutviewer .s7flyoutzoomview

CSSプロパティ

説明

background-color

メインビューの背景色。

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

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

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

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSSプロパティ

説明

メインビューの左上隅を基準とした、フライアウトビューの水平方向の位置。

トップ

メインビューの左上隅を基準とした、フライアウトビューの垂直方向の位置。

width

フライアウトビューの幅。

height

フライアウトビューの高さ。

枠線

フライアウトビューの境界線。

例 — フライアウトビューを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による上書きはサポートされていません。

CSSプロパティ

説明

background-color

ハイライトのカラー。

不透明

ハイライトの不透明度

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プロパティは次のとおりです。

CSSプロパティ

説明

background-image

カーソルのアートワーク。

width

カーソルの幅。

height

カーソルの高さ

メモ

カーソルでは、 input属性セレクターがサポートされます。このセレクターは、デバイスごとに異なるカーソルのアートワークとサイズを適用するのに使用できます。 特に、input="mouse"はデスクトップシステムに対応し、input="touch"はタッチデバイスに対応します。

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

overlayパラメーターを1に設定した場合、ハイライトフレームまたはカーソル画像の周囲の領域は、CSSクラスセレクターを使用して制御します。

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSSプロパティ

説明

background-color

オーバーレイのカラー

不透明

オーバーレイの不透明度。

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

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

CSSプロパティ

説明

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

color

テキストカラー

font-family

フォント名

font-size

フォントサイズ

パディング

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

background-color

メッセージテキストの背景色。

border-radius

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

不透明

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

Internet Explorer 8の場合は、 filter:alpha(opacity-...) ) を使用します。

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

例 — 半透明のチップメッセージを、白のArial 12pxフォント、メインビューの下端から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); 
}

このページ