Changing image on hover with css without a delay

You create a menue in your web page, that is not made of simple text links, but instead there is a small image for each link that changes slightly wenn hovering over it with the mouse. Each image is placed via the "background"-attribute of the "div"-tag. When hovering over that image, the "hover"-method calls the 2nd image, that shall be shown. Now there is the problem, that when loading the page for the very first time, only the 1st image of every link is loaded. The 2nd ones only gets loaded when hovering over them the first time. And exactly in that moment a very very short delay in loading the 2nd image ist noticeable.

Taggings:

Submitted by Alexander Schwarz on Mon, 12/08/2014 - 21:09
1 answer

Loading only one image and position it when hovering over it

It takes just a little modification in the images and the "hover"-methode.
First: the image that is shown by default and the 2nd image, that ist shown when hovering over the first, have to be combined to one image. Just put the 2nd image directly under the 1st via an image tool and save it as a new image. So this new image should be exactly twice the size of the original ones. Then use this new image in the "background"-attribute in your div. The "height" of the div must be exactly the half of the height of the new image. Furthermore you have to set the "background-position" in the div to "top". This way only the upper half of the image is shown. And finally you set the "background-position" in your "hover"-element to "bottom". So when hovering over the image it just gets "moved" to the top and only the bottom half can be seen.

In the attachment you can see what it would look like, when combining the 2 images.

Here is an example where the comined image is 100px wide and 60px high:

#button_home {
position:absolute;
width:100px;
height:30px;
background:url(home.png);
background-position:top;
}
#button_home:hover {
background-position:bottom;
}

This way everytime the page is loaded the combined image is loaded and there will be no delays.

Submitted by Alexander Schwarz on Mon, 12/08/2014 - 21:32

Taggings: