Best and easier way for rollover image links?

Hi

I've tried to create buttons with rollover effect, I've used Google, but I still can't find the best way to do this. They are all too complicated (long code) or bugged in some browsers.

I want something which will work in all browsers and would be easy to write (code).

Thanks!

Zaborg

 

As an exmaple you csn do this way,

#button a {
background-image:url("../images/button.png");
background-repeat:no-repeat;
background-position:center top;
text-indent:-9999px;
}
#button a:hover{
background-position:center bottom;
}

Code (markup):

button.png will have the image of the button in normal state and hover state. on a:hover the position of the background will change.

Take a look at this tutorial http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
In action "learn buttons": http://restoroofing.com

 

Here's the optimized version, most of it can be combined in 1 line:

#button a {
background:url("../images/button.png") center top no-repeat;
text-indent:-9999px;
}
#button a:hover{
background-position:center bottom;
}

HTML:

 

If you just want to do an image swap then a javascript roll over is probably the simplest most straight forward way to get there.

Another option is to do it with CSS using the pseudo classes for the anchor tag.

 

Make sure you use one image with a background position shift on hover. If you specify another image you will experience a slight load time on the hover...bad. This should be done with CSS not Javascript for the easiest and most efficient solution. There are plenty of tuts on this method.

 

JS rollover means that you need 2 pictures (that means you have 2 http requests) to load for every link.
If you do it with CSS you can use CSS sprites, you save one http request and no JS is involved.

If someone has JS disabled (for any reason), the CSS menu will work ... JS rollover will not.

There are several sites that handle CSS sprites, just Google for it

 

I might be wrong, but I'm thinking you might be able to use JS with 1 image. You simply have to change the class (which would have a different background position for the same image), which would allow for advanced sprite effects to be utilized. And if you're creative enough, you could setup a <noscript> default CSS code to kick-in with the default :hover for changing the background position when JS is not available.

 

Yeah, possible. But those stuff can be done with CSS without any line of JS or <noscript> tags, the effect is the same.

Just use something like:

a:hover, a:focus {...}

Code (markup):

and you are set.

 

Yes but you can't use CSS to do something like this: http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect

I'm sure it can be made to use only 1 image.

 

Well, it is pure CSS. Only the animation effect is done with jQuery.

And if I take a closer look it is done in a bad way. It is possible with CSS sprites too.