ズームアウトボタン

最終更新日： 2024年7月22日

トピック：

作成対象：

開発者
ユーザー

このボタンをクリックまたはタップすると、メインビューの画像がズームアウトされます。このボタンは、画面の領域を節約するために携帯電話には表示されません。このボタンのサイズ、スキンおよび位置は、CSS を使用して設定できます。

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

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

.s7spinviewer .s7zoomoutbutton

CSS プロパティ	説明
天	上部のボーダーから配置（パディングを含む）。
right	パディングを含めて、右側のボーダーから配置します。
left	パディングを含めて、左のボーダーから配置します。
下	下罫線からパディングを含めて移動します。
幅	ボタンの幅。
高さ	ボタンの高さ。
background-image	特定のボタン状態に対して表示される画像。
background-position	CSS スプライトを使用する場合、アートワークスプライト内に配置します。 CSS スプライトージ参照してください。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

ボタンのツールチップはローカライズできます。詳しくは、ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 32 x 32 ピクセルで、ビューアの上端と右端から 6 ピクセルの位置にズームアウトボタンを設定する最後に、は、4 つの異なるボタン状態ごとに異なる画像を表示します。

.s7spinviewer .s7zoomoutbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7spinviewer .s7zoomoutbutton [state='up'] {
background-image:url(images/v2/ZoomOutButton_dark_up.png);
}
.s7spinviewer .s7zoomoutbutton [state='over'] {
background-image:url(images/v2/ZoomOutButton_dark_over.png);
}
.s7spinviewer .s7zoomoutbutton [state='down'] {
background-image:url(images/v2/ZoomOutButton_dark_down.png);
}
.s7spinviewer .s7zoomoutbutton [state='disabled'] {
background-image:url(images/v2/ZoomOutButton_dark_disabled.png);
}

recommendation-more-help