Archive for the 'css' Category

No image preload for mouse over, hover. Use css for the same effect.

Tuesday, February 6th, 2007

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:

PLAIN TEXT
HTML:
  1. a.mainlevel:link, a.mainlevel:visited {
  2. display: block;
  3. background: url(button.jpg) no-repeat;
  4. height: 26px;
  5. width: 195px;
  6. }
  7. a.mainlevel:hover {
  8. background-position: 0px -26px;
  9. }

So, if this is the image, only the upper half will appear as the button, while on mouse over, the second half will appear.

example

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.

Posted in css, html | 1 Comment »