Diagonal menu buttons...how to do it without Flash?

[monktus]

I'm working on a navigation menu that has diagonally sloping buttons and it's proving to be a bit of a hassle. Here's what it looks like (over state on the right):

http://flyingmatchstickmen.com/menu.png

I'd rather not do it in Flash so I've been looking at CSS rollovers and imagemap rollovers in JavaScript but I'm not sure that either can do it. Does anyone have any suggestions?

Cheers,
Craig

 

[Natobasso]

I can't even open the page, so it's really hard to comment on it. My gut reaction is for you to simply create the buttons you want in photoshop and make them work.

 

[mdnky]

You'll have to display your image as a whole on the screen, then use a map to define the 'hot' regions for each link. You'll then have to create a copy of the main image with just that section highlighted (news, forum, etc.) in the pink for each link there. A bit of JS for the rollovers (change the main image to proper over one depending on the link) and everything should work.

In reality it's not a great idea, since you're gonna bloat the site and waste bandwidth with all those large over images.

I'd rethink it and maybe go for a straight-line version (http://homepage.mac.com/mdnky/test/flyingmatchstickmen.html).

 

[btoth]

That layout looks like it would be too complex for current CSS to handle, unless you can somehow position each button image absolutely with CSS, but I'm not experienced enough to know if setting up non-rectangular click areas is possible or not.


http://www.simplebits.com/notebook/2004/07/12/bulletproof_slants.html

 

[monktus]

Thanks guys. I think the JavaScript thing would be a bit too messy, I'll either try Flash or find out how much the band want their 45 degree angle.

 

[andehlu]

for something like that, flash flash flash Ive done something like that once using JS and it was a COMPLETE mess.