Every time I make a new web site, there are at least a few rollover images that I have to apply. I have used javascript for this job before, but was not very happy with it. I dont like using javascript and I avoid it if I have alternatives. I have also used another method where I define the class or id of an image as invisible and make it visible later. But this is not my favorite either.
The best method for making a rollover image is using the css method: background-image and background-position like:
-
a.mainlevel:link, a.mainlevel:visited {
-
display: block;
-
background: url(button.jpg) no-repeat;
-
height: 26px;
-
width: 195px;
-
}
-
a.mainlevel:hover {
-
background-position: 0px -26px;
-
}
So, if this is the image, only the upper half will appear as the button, while on mouse over, the second half will appear.
I can not make a working example with wordpress, but if you have a problem applying this technique, just give me a comment and i will try to help you out.
Awesome view pertaining to No image preload for mouse over, hover. Use css for the same effect.. Thoroughly love your interesting posts.