Image Roll Over Help

[stevetp]

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

[c2uk]

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

[Black Max]

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!

[stevetp]

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?

[c2uk]

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.

[AtSea webdesign]

A List Apart has a good article on how to use CSS sprites.
http://www.alistapart.com/articles/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.