Interesting navigation.....

[zumojuice]

Suisse Design & Art Direction

[PR Design]

Yeah, not bad. Should be done with CSS though - it's a bit inaccessible.

[zumojuice]

could you do that with css?

[PR Design]

I could

[jeffross]

Originally Posted by PR Design

I could

PR's not called the CSS Wizard for nothing!!

[zumojuice]

Give the the basis of that in CSS ? in layman's terms...

[tommylogic]

a:hover with an alternate image... maybe throw in some opacity trickery

[LeadMagnet]

The problem with that solution tommy is that the hover area is much smaller than the image being changed. Also, the images overlap with those of its neighbours.
I can't think of how to do that without using a bit a of javascript at least.
*edit* Unless i surrounded the hover area with some other divs and did something like this:

#div1 {
background-image:url(yellow.jpg);
width:50px;
height:50px;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
#div1:hover {
background-image:url(black.jpg);
width:300px;
height:300px;
z-index:2;
}
#div2{
width:300px;
height:250px;
position:absolute;
top:50px;
left:0px;
z-index:3;
}
#div3{
width:250px;
height:50px;
position:absolute;
top:0px;
left:50px;
z-index:3;
}

Is that it? Is there some way to avoid surrounding the button div? Let's hear your solution harry.

[PR Design]

I did a similar thing here, so to get the above all I'd need to do was put a different bg image on the hover state.

EDIT: It's made with a <ul> and a variety of <li>s making the code more semantic.

[LeadMagnet]

I don't see how that would do it... maybe i'm missing something?
You need to be able to affect a larger area than the hover target.
Ideally, if you could select the ancestor of the element you're hovering over, then that'd solve SOOOOO many problems, but i don't think you can.