Interesting navigation.....

[tommylogic]

who says your image and hover image can't include the area that isn't to be lit?

you could use this as your hover image



Me.. I'd use opacity in this situation and throw the amber light slightly transparent over top... similar to the opacity in my header on my site ... that validates

[LeadMagnet]

Originally Posted by tommylogic

who says your image and hover image can't include the area that isn't to be lit?

Well that's too easy. That's no challenge and that's not the effect on the site. The hover area is the white rectangle that says suisse on it.
*edit*
Also those images overlap each other.

[LeadMagnet]

This is what my idea looks like:
Suisse CSS navigation
I don't like that i have to use so many divs to cover parts of the navigation... but i can't think of any other way using purely css.
This method functions exactly like the flash version though.

[Toon]

Works well, add titles and alt tags to your images and it will even be optimized

[zumojuice]

Good stuff, so what are the pros and cons of the two, basically that lead's is valid and optimised? you should send it to them....

[PR Design]

I still think my method would work. Just ad a background image to the hover and you're set. Plus then it uses image replacement as opposed to plain old images. I might knock it up when I get my new PC... In two days!!! (Can't wait lol)

[LeadMagnet]

Yeah do, or if you could explain in a bit more detail how your method would work?

The pros of the flash method are that it's easier to construct and you can be guaranteed that it will look exactly right on any computer with flash.
The cons are that some people don't have flash or just don't like flash (flash-bashers on this forum :P)

The pro of the CSS is method is that if coded properly (i didn't bother with any cross-browser testing, it works in FF and that's good enough for me) it will display the same on any modern browser, but if you make a mistake it could easily mess up for someone.
The cons are that it requires more thinking to create it than the flash version.

Both versions are pretty much the same size (about 350kB) so there's little improvement there on either version.

[PR Design]

The thingy I built for the doctors site is basically a CSS image map, using relatively positioned list items. By adding a new background image to the hover state should work. I think. I will try knock it up on Tues.

[zumojuice]

This is actually really interesting. geeky, but interesting...

[PR Design]

VERY geeky lol.