可変ボリューム

ミュート可能ボリュームコントロールは、最初は、ユーザーがビデオプレーヤーのサウンドをミュートまたはミュート解除するボタンとして表示されます。

ユーザーがボタンの上にロールオーバーすると、スライダが表示され、ボリュームを設定できます。 可変ボリュームコントロールは、CSS を使用して、そのコントロールバーを基準にして、サイズ変更、スキン、配置を行うことができます。

可変ボリューム領域の外観は、以下の CSS クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume

可変ボリュームの CSS プロパティ

ミュート/ミュート解除ボタンの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

ボタンの状態ごとに背景画像を制御できます。 ボタンのサイズは、ボリュームコントロールのサイズから継承されます。

ボタン画像の CSS プロパティ

垂直ボリュームバー領域は、以下の CSS クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

垂直ボリュームバー領域の CSS プロパティ

垂直ボリュームコントロール内のトラックは、以下の CSS クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直ボリュームコントロールの CSS プロパティ

垂直ボリュームノブは、以下の CSS クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直ボリュームコントロールノブの CSS プロパティ

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

例

32 x 32 ピクセルで、コントロールバーの上から 6 ピクセル、右端から 38 ピクセルの位置に配置するミュートボタンを設定するには、次のように記述します。 選択時または未選択時の 4 つのボタンの状態ごとに異なる画像を表示します。

.s7mixedmediaviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}

次の例は、可変ボリュームコントロール内のボリュームスライダのスタイルを設定する方法を示しています。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}

Business.Adobe.com リソース

Multichannel Communication Automated Onboarding Mobile Forms Digital Rights Management Digital Asset Management Digital Signage