3つのパーツからなる柔軟なボタンを作成しました。
1枚の絵から3つのパーツを作りました。「スプライト」か何かと呼ばれていると思います
ここにCSSがあります。
.commonButtonLeft, .commonButtonContent, .commonButtonRight
{
background-image:url(img/commonbutton.png);
}
.commonButtonLeft
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:left;
width:14px;
}
.commonButtonContent
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:center;
text-align:center;
}
.commonButtonRight
{
height:40px;
background-repeat:no-repeat;
background-position:right;
width:14px;
float:left;
}
ここで、クリックされたボタン用に別の画像「commonbutton_onclick.png」を作成しました。
そして、次のクラスを追加しました。
.commonButtonLeft:active, .commonButtonContent:active, .commonButtonRight:active
{
background-image:url(img/commonbutton_onclick.png);
}
うまくいきませんでした。
領域「.commonButtonContent」をクリックすると、その領域のみがアクティブな画像になります。
すべてのクラスを「commonbutton_onclick.png」にしたいです。
ちなみにこの場合css3は使えません。
私を助けてください。