An interface of control-buttnos is released on default browser's styles. I try to use standart buttons () with images as values

HTML:

<div id="control-play" class="button"><span></span><input type="button" value=""/></div>

CSS:

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}

But of course I get a problem with :hover event when the cursor's hovering an image:

In JS I can activate click by catching images's onClick:

$('#control-play span').click(function(){$(this).parent().find('input').click();})

But I can't do that for onHover event.

As you can see, I don't imitate :hover {} and :active() styles, I use default ones. I could grab images and use them as backgrounds but it doesn't seem a good-style trick.

So, colleagues, any ideas? Any of jQuery, CSS3 or HTML5 are wele.

UPD: I mentioned it carefully, nevertheless most of answers suggest toggling whole background of the button. Note: I use buttons with browser's styles, I just try to use 16x16 icons instead of text labels.

An interface of control-buttnos is released on default browser's styles. I try to use standart buttons () with images as values

HTML:

<div id="control-play" class="button"><span></span><input type="button" value=""/></div>

CSS:

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}

But of course I get a problem with :hover event when the cursor's hovering an image:

In JS I can activate click by catching images's onClick:

$('#control-play span').click(function(){$(this).parent().find('input').click();})

But I can't do that for onHover event.

As you can see, I don't imitate :hover {} and :active() styles, I use default ones. I could grab images and use them as backgrounds but it doesn't seem a good-style trick.

So, colleagues, any ideas? Any of jQuery, CSS3 or HTML5 are wele.

UPD: I mentioned it carefully, nevertheless most of answers suggest toggling whole background of the button. Note: I use buttons with browser's styles, I just try to use 16x16 icons instead of text labels.

• javascript
• jquery
• html
• css

• If I understand rightly, can you not just use background images? So just use <input type="button /> and style it with CSS background images? – christian.thomas Commented Aug 16, 2012 at 14:04
• 1 Why not use a <button type=button> tag and just put an <img> tag in it? – Pointy Commented Aug 16, 2012 at 14:09
• Right, it's an obvious and not good way, but the question is about alternate ways. – Alexander Palamarchuk Commented Aug 16, 2012 at 14:11
• Pointy, you're the only one who knows HTML5 thoroughly and reads questions carefully :) Thanks a lot! I'd like to mit your answer if it was an answer. – Alexander Palamarchuk Commented Aug 16, 2012 at 18:33

5 Answers 5

<div class="button">
//height and width of this DIV should be same as `input[button]`
  <input type="button" />
</div>

<style>
.button{
   background: url("your_normal_image.jpg") no-repeat 0 0;
   height: 123px;
   width: 123px;
   }
.button:hover, .button.some_class{
   background: url("your_hover_image.jpg") no-repeat 0 0;
   }
.button input[type="button"]{
   opacity: 0;}

</style>

And for clicked event add .some_class with .button using Jquery - code will look like

  <div class="button some_class">
    //toggle between  ".some_class"

      <input type="button" />
    </div>

another way is - Play with style background-position: instead of adding class .someclass using image spriting method

To know more : Look at Image spriting article

you have 3 css actions that work quite well
note: !important will force the background to change by giving this part a higher priority

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{
  background: url("background.png") no-repeat -123px 0 !important ;
  }  //moves the bg image up
.button:active{
   background: url("background.png") no-repeat -246px 0 !important ;
  } //move the bg up  more when yu push the button
</style>

for beginers you can use 3 saparate images wich will result in loading delay on first hover or click:

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{background: url("background1.png") no-repeat 0 0 !important;}   
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;}  
</style>

If I understand correctly... You want to be using sprites. Sprites are background images that have both the Hover BG and Standard BG in one image. In this case, both 16px x 16px images would be in one image file with a total width of say 32px x 16px;

You then can use CSS to just switch the background position creating a smooth on hover effect with just CSS.

#control-play span 
{
    background-image: url('../i/ruler/play.png');
    width:16px;
    height:16px;
    background-position: 16px 0px;
}

#control-play span:hover
{
    background-position: -16px 0px;
}

I'd say the most semantic way is to have:

HTML:

<input type="button" class="button" value="Submit" />

OR

<button type="submit" class="button">Submit</button>

CSS:

.button {
display: block;
width: 16px;
height: 16px;
background: url('../i/ruler/play.png') top left;
border: 0;
}

.button:hover {
background-position: bottom;
cursor: pointer;
}

That way you don't have to rely on any Javascript (Javascript could also be turned off..)

The most suitable answer is in using HTML5 <button>...</button> instead of <input type=button value=""/>

HTML:

<button type="button" id="control-play" title="Play"><span></span></button>

CSS:

button#control-play {width: 50px; height: 49px;}
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;}

There's no need in sprites, 3 backgrounds for imitation standart browser opportunities for buttons. Everyone will use these buttons in its favorite style (even using skin for a browser), and only my icons will be permanent.

Via Pointy's ment.