Question

Is there any quick and easy way to use a sprite to create a rollover on an input?

I am not that familiar with inputs and specifically what you do regarding rollovers on inputs. I understand using sprites on tags. I also get the concept of using Javascript onMouseOut with two images, but I would really prefer to use a sprite. They seem to work best and I won’t have to worry about flickering.

Here is an image I am working with:

Here is the code I am working with:

<style>
#newsletterSubmit{background:url(/Images/Buttons/submit.png) 0 0 no-repeat;display:block;width:90px;height:50px;text-indent:-9000px;}
</style>

 <input id="newsletterSubmit" type="image" src="Images/Buttons/Submit.png" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px -50px';" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px 0px';" />

Answer 1

You don’t need javascript or onmouseover, it can all be done with CSS. Here is a simple example:

<input type="submit" value="Submit">

input {
    display:block;
    text-indent:-9000px;
    border:0;
    padding:0;

    background:url(/Images/Buttons/submit.png) 0 0 no-repeat;
    width:90px;
    height:50px;
}

input:hover {
   /* Move the background image up 50px (height of button) */
   background-position:0 -50px;  
}

Demo: http://jsbin.com/ihafib

You’ll want to check the coordinates of your sprite and crop it appropriately to make sure everything lines up correctly.