[hollywooood]

In my menu I want to use an image rollover. I only know the javascript way of doing this. Is there any way to swap images using css?

Thanks,

Will

[haku]

Yep.
Pure CSS Image Rollovers

That should help.

[hollywooood]

Fantastic! Thank you!

[hollywooood]

Another question Haku. I have 8 different photos or each link, how do I manipulate the <a href....> to display each of the different rollovers? I know a1,a2,a3 aren't options. Would I use <a id="blah">? Like to know the best scenario for this one. Thanks for your help...

[haku]

Can't say I understand what you are asking.

[hollywooood]

Sorry about that.

I have two photo's for each link..the main one and the rollover. It seems that the css code will only work for one rollover image. I need it to work with 8 separate images. homehov...abouthov, etc.

Does this make sense? If you go to mpowercj.com it should give you a better understanding of what I am trying o do. I did this with javascript.....

Thanks again... hope this was clearer...

[hollywooood]

one more thing....

I live in indonesia and use hosting in the states. Sometimes I have trouble viewing my site with the domain name but never trouble with the IP. It's not always a problem but it does happen frequently. Any ideas as to why this is?

[haku]

You just write different CSS for each rollover image. Give each image a different ID, then use that ID to write the CSS. EX:

<a id="link1" href="#">text</a>
<a id="link2" href="#">text<a/>

CSS:

#link1
{
   background: url(path/to/image1.jpg);
}
#link1:hover
{
   background: url(path/to/rollover1.jpg);
}
#link2
{
   background: url(path/to/image2.jpg);
}
#link2:hover
{
   background: url(path/to/rollover2.jpg);
}

Note: this code will not work as is. Its just to give you the idea to start working from. You will have to add some stuff to make it work. Follow that tutorial.

[hollywooood]

Once again.....thank you!

[Bill Posters]

See also: Google: css sprites rollover

[haku]

The method they show in the link I posted has CSS sprites built into it.

[Bill Posters]

Then consider my post as a bump about using sprites.

[haku]

They are a good thing to use!

[paulmsmith]

CSS Sprites for rollovers are a good thing to use. They are great for bringing down the number of HTTP Requests made to the server, for the same reason it means once the image has been downloaded you have all the "up" and "hover/rollover" states cached in the browser.

As a designer you can easily update your all your rollovers from one image, with one export rather than lots of seperate files and images to export. See the example below from a site I recently worked on:

resources.paulmichaelsmith.com/dt/homepage-nav-states.gif

If you set up a PSD correctly you can use the guides in Photoshop to work out the increments for the background position shift.

resources.paulmichaelsmith.com/dt/navpsd.gif

As with Javascript, CSS sprite rollovers have plenty of issues. The main issue is that there is no easy way to do them that accounts for the "CSS ON - Images OFF" scenario but most people are happy to write that off and not worry about it. It is infact easy to fix that issue but only if you don't need transparency on the rollover.

There is an excellent round-up of image replacement techniques at this url: mrclay.org/wd/tests/ir/ - this is valid because its essentially what you are using when doing CSS rollovers unless you are only adjusting the background and still using the text.

Here is the code you might use:

        #home #blq-local-nav ul li#nl-about a,
        #home #blq-local-nav ul li#nl-apply a,
        #home #blq-local-nav ul li#nl-uploads a,
        #home #blq-local-nav ul li#nl-tips a {
            background-color: transparent;
            background-image: url(/speaker/img/home/homepage-nav-states.gif);
            background-repeat: no-repeat;
            display: block;
            height: 59px;
            overflow: hidden;
            text-indent: -1000em;
        }
        
        #home #blq-local-nav ul li#nl-about a { background-position: 0px 0px; width: 170px; }
        #home #blq-local-nav ul li#nl-about a:hover { background-position: 0px -59px; }
        #home #blq-local-nav ul li#nl-apply a { background-position: -170px 0px; width: 149px; }
        #home #blq-local-nav ul li#nl-apply a:hover { background-position: -170px -59px; }
        #home #blq-local-nav ul li#nl-uploads a { background-position: -319px 0px; width: 170px; }
        #home #blq-local-nav ul li#nl-uploads a:hover { background-position: -319px -59px; }
        #home #blq-local-nav ul li#nl-tips a { background-position: -489px 0px;    width: 146px; }
        #home #blq-local-nav ul li#nl-tips a:hover { background-position: -489px -59px; }

Sorry about the images, guessing to prevent spammers you have disabled URLs for newbs to the board. If you paste the URLs in your browser you should get to them fine. :P

There's more to this though, you can string together classes in the html. So for example:

In the HTML

<div class="fl bdr">
   <p>Hello World!</p>
</div>

In the CSS

.fl { float: left; }
.bdr { border: 1px solid #000; }

Would apply both classes to the element. Obviously this is a simple example but you can use this to great effect for overriding default styles and adding slight variations to classes.

[hollywooood]

Thanks paul! Gonna try this system too.

[roto]

Some fine techniques, those. I think this was also discussed in 2005, 2006 and 2007 in other threads.

Reeeeeeeeeeewind!

[arsholdings]

I recommend taking a look at cssdrive.com for examples

[hollywooood]

Thanks again for all the good feedback. I found Haku's system worked well however my images are PNGs. Have there been any new ways of dealing with PNGs as a background image for IE? The layout looks good in all other browsers but of course IE is a disaster. I tried to change the image format to GIF but the image distorts terribly. Hope someone can help. Thanks again!

Will

[chetan]

tutorio.com is best guide to learn css image rollover.Many times i have been got helped from this site.Its really nice.







Please stop spamming your link everywhere. Contribute more to the forum before you do that. Thank you.

[hollywooood]

Thanks Chetan but it's not the css rollover that is the trouble, it's IE and it's problems reading the PNG image format. Hoping there is a solution now. I checked this problem about 2 months ago and background images were a no go on operation IE. Any new info out there?