Submit button with preloaded images?!?

[jmansa]

I have a submit button styled with images like this:

<input type="submit" class="submit" value="" />

.submit
{
    background: url(./images/submit_button.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}
.submit:hover
{
    background: url(./images/submit_button_over.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}

This works allmost perfect, but... When moving mouse over the button there is a little loadtime on the submit_button_over.jpg image.

My question is then how to preload this image when page loads?!?!

Any help is apriciated ;-)

[Paul O'B]

Hi,

Stitch both images into one image that is 130px x 84px high and use just the one image.

On hover you shift the background position to reveal the new part of the image which means that the image is always preloaded on page load.

.submit {
    background: url(./images/submit_button.jpg) no-repeat 0 0;
    height: 42px;
    width: 130px;
    border: none;
}
.submit:hover { background-position: 0 -42px;}

BTW The above won't work in IE6 as you can only hover anchors in IE6.

[jmansa]

Thanks... Works like a charm... By the way... Who needs IE6?!?

[RyanReese]

Corrporates..people with low self esteem-the list goes on and on lol.