Image Roll Over Help

Hey everyone,

Just started putting a website together for a friend and have included some roll over images for the navigation.

The top row is working fine the the bottom row has a sort of half shadow effect in IE & Safari. The site looks fine in FF.

Any ideas?

The site is edgetoedgedesign.com/new.html

Thanks

A List Apart has a good article on how to use CSS sprites.

If that doesn’t work google “CSS sprites”.

There are hundreds of random scripts out there. The last site I created I used a database of images and displayed them randomly on the page with php.

  1. simple css, different background images for normal state and :hover - tutorials on how to do this can be found here: http://css.maxdesign.com.au/ (not all use that technique, you’d have to check each single one to find the one that comes closest to what you want)

  2. yes, you’d need a script, you can choose between a server side script using php (or another server side programming language) or client side JavaScript - maybe one of the JavaScript libraries has something like this but I’d advise against using client side.

Thanks guys,

Any suggestions on how to do this, I am using two images due to the font being a self created one. I don’t want to replace the font although I understand that would be a better option for many reasons.

Any help would be greatly appreciated.

I will also be looking for some help with the next step, to have 6 images displayed on the front page but these be randomly grabbed from a pool of about 18? What should I be looking at here. does this have to be some sort of script?

Looks very strange in Opera. I really wouldn’t do it that way, you have a morass of JS in your code that you could easily replicate with basic CSS hover attributes. Welcome to SP, Steve!

please look into CSS image replacement methods, using javascript for this is ugly and not recommended.