Easy Fast Rollovers

[Reverse Blade]

The Css is like this:


<style>
.nav a:link {
background-image: url(promotion.jpg);
background-position: 0px;
}
.nav a:hover {
background-image: url(promotion.jpg);
background-position: 50px;
}
</style>


It gives the link a background and positions it to 0px on the image, then on hover it moves the image 50px. Try it to see with your own image to make easy rollovers, it only takes one image. To make the next not look like a link just use text-decoration: none;

[Blink]

zohvi said:

The Css is like this:


<style>
.nav a:link {
background-image: url(promotion.jpg);
background-position: 0px;
}
.nav a:hover {
background-image: url(promotion.jpg);
background-position: 50px;
}
</style>


It gives the link a background and positions it to 0px on the image, then on hover it moves the image 50px. Try it to see with your own image to make easy rollovers, it only takes one image. To make the next not look like a link just use text-decoration: none;

it still needs to load the image though...

Regardless that's cool. had no idea that would work.

[Kahless]

ah yeah, makes sense, Though it would remove the drag of loading the image, its still the same total size

[Reverse Blade]

Eh, it makes it smoother

[Tobias]

I've seen that before. I always forget to use it, though. ;D

[Stinky666]

Makes 100% no sense to me, but thanks lol

[Chad]

haha Stinky. Lern2CSS. My rollovers are somewhat like this.

[Blink]

I think what it does it load it on page load because it recognizes it as a background.

Why not just use a preloader js code?

[Tobias]

Because JS is slower than CSS, and this way it only has to load one image, although it is just twice as big as one of the two that you would need if you had them seperately. No ugly pause while it downloads the new image during the hover.

[Kahless]

CSS loads approximatly 4x faster then JS from what Ive read

[Blink]

kahless said:

CSS loads approximately 4x faster then JS from what Ive read

CSS is approximately 4x gayer then JS.

But o.k, you win. This code rocks my sox and I'll use it on my next website  

[Kahless]

CSS is more useful on PBs then JS, really