RoundedCorner free website theme
Continue reading "RoundedCorner free website theme"
CSS button hovers without the lag
background-image:url("img/normal.png");
}
a:hover{
background-image:url("img/mouseover.png");
}
The image specified in the a:hover class will be displayed when the user moves the mouse pointer over an image. Once the user moves the mouse pointer away from the image it will revert to normal.png as specified in the a class.
This technique is an easy way to implement button hovers but it has one flaw. When the user moves the mouse over the link for the first time there is a time lag during which the mouseover.png image is fetched by the browser. Therefore the user does not see this effect immediately.Whats the solution? Well I discovered it while going through the code of the free wordpress theme freshy.
The author of that theme Julien De Luca uses an interesting techinque. Both the normal state and the hover state of the button are placed in the same image. However the position of the background is changed depending on hover or not:
background-image:url("normal.png");
background-position:top left;
}
a:hover{
background-position:bottom left;
}
Using this technique you can remove the time lag because the browser has to fetch only one image that contains both normal and hover states.
