Rollover Image

[delgreco]

Just want to know if someone could explain how this was accomplished:

On the website, modcloth.com, the top horizontal navigational menu.....both the text and the box change change colour as you rollover it.

Are these just two different images, and you set which one is displayed using CSS?

Or is it not an image, but rather just text within a div....and they have the background colour of the div and the colour of the text change on rollover using CSS?

Images or text within a div???

Any help is always very appreciated, thanks!

[donatello]

I did not look at your page, but the right way to do this is via CSS Sprites, which work the way you describe.

There are tricks to do this, and I put up a little template page which explains it all for a friend...

The sprites on the page are in Polish, but the instructions are all in English and you can even practice with them.

http://www.delpercio.com/test/kupteraz.html

Now that you know what they are called, you can prowl Google for more tutorials if you need them:

http://www.google.com/search?q=css+s...ddress&ie=&oe=

[delgreco]

donatello,

I appreciate your reply, thank you very much. One question though:

Looking at their menu (modcloth.com) or any menu for that matter, would best practice be to use one large image for all the categories....or should I slice up the header creating individual images.

My assumption would be to create 2 images.....one image containing the whole menu (products, about us, contact us, etc.).....and then the second image would be the menu again in a different colour....and then use the sprites to get the rollover effect. Would you agree? Or do I need individual images for each rollover (products, about us, contact us, etc)?

[donatello]

It's really up to you how you do it.

Sprites are far superior to rollovers as there is no delay when the image switches, you instead use CSS to simply change the position of the background. The other advantage is that you can use plain text in front of the dynamically changing background image - Google likes that and your page will index better as you will then have hyperlinked keywords instead of images.

Usually rollover javascript is not used with sprites, so the common practice is to have all of your sprites on one image that simple changes position through a "div window". No Javascript, just CSS does the trick! Why resort to messy Javascript if you do not have to.

Take a look at my demo page, you can see how it was done with one button.
Here is another page I built where I used Sprites:
The Guitar Tuner

There, sprites were used as all elements... background sprites on one image and rollover sprites on another. Background sprites only changed when the page changed from say a page to a post. RSS and buttons were rollover effect sprites.

THere is also a webpage out there called "SpriteMe" that generates sprites for you! Google it to find out more.

Good luck.

[delgreco]

donatello,

Once again, really appreciate you replying. I'm still a little confused, and i think it may be the way i'm explaining myself. I know how to use sprites having incorporated them into a site i had built. I had a background that comprised of many images.....and instead of breaking them up, i used one big image, and sprites to display the individual images properly....this allowed the site to load much faster.

But i'm stuck with using sprites in a menu. Your menu, for example...tuners, forks, software.....are all of these individual div's?? I can't figure out how the web browser would know that the user has his mouse over a menu button unless each menu button was in its own div.....and sprite css was written for each div to allow it to change state, am i correct?

PS - The text for your menu buttons, is that just plain text or did u use an image?

Thanks again donatello

[donatello]

That site is built using WordPress. Buttons are all text.

Text in your buttons works best for Google indexing too.