3

I am making a Wordpress website and some the buttons have a background image, and the image changes on hover. This is done through just simple CSS. When the user first goes to the page and hovers over a button, the space goes blank until the new image loads.

What is the best way to load all the images so it has a smooth transition.

P.S There is only max 2 buttons per page

3
  • what are the pixel sizes of these images? are they downscaled but retain a high pixel size?
    – user1888493
    Commented Mar 4, 2014 at 2:13
  • They are 130px x 39px. They are original height, not downscaled
    – Jordan
    Commented Mar 4, 2014 at 2:24
  • That's odd, images that small should load almost instantly :o
    – user1888493
    Commented Mar 4, 2014 at 2:26

2 Answers 2

6

Make a div with an id of preload that contains all the images you want to have show up when the user hovers over the buttons and put it anywhere in your html (it doesn't matter where) ex:

<div id="preload">
   <img src="path/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="path/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="path/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Then in your CSS, add:

#preload {display: none}

this will hide your images, but they will be loaded. Just make sure that your buttons use the same path as the ones that the preload div do, or else you will be loading images twice.

Full tutorial here:

http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/

5

You can use "Sprite" images for your buttons. Thus all button, normal bg and hover bg will remain in an image. And that image will load initially with the button normal state. For hover, you have to use same sprite image, but different background-position in css.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.