Triangular clickable areas

Hey all,

I'm working on a web based mobile application which has navigation elements in triangular shape. The way I've implemented this is by having overlapping DIVs with the triangles as image backgrounds. Now, due to the way the triangles are arranged, the DIVs overlap each other. This causes some triangles to not receive any tap events.

Triangular navigation
Please see the attached picture to see what I mean. In the picture, the bounds of the "Redeem Offer" and "Featured Dentists" lie over the "Search" triangle. If I use z-index to bring the search button on top, the bounds of the Search button lie over the other two buttons.

Please advise on how I can solve this problem.

PS: I'm using Sencha Touch 2.1.1 to develop this application, if that makes any difference.

I'm looking forward to your responses.

Thank you,
Shishir Srivastava
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

The simple answer is use images.
No matter how you lap the div's they will always overlap something else - a square is a square is a square even when it's a triangle.

Other option is make a transparent image and map the clickable areas, this image would be layered over the triangles
shishir_sriAuthor Commented:
Regarding your first suggestion, wouldn't I have the same problems if I used images? DIV or IMG, both are ultimately squares. Can you elaborate on how using IMGs will solve the issue?

You're right, sometimes common sense escapes me.
As you already have the layout then using an image map on a transparent image is the easiest way to go.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

shishir_sriAuthor Commented:
Hmm... Thanks for the idea, but its not going to be as simple as it sounds. The triangles are actually dynamically sized based on the screen size of the device.

I guess I can simply discard the entire thing, and use one big image for the entire navigation.

However, with this approach, I won't be able to change the image or color of the triangles on tap.

Any ideas?
shishir_sriAuthor Commented:
That's great! I cannot directly use the plugin, but I can use the same concept in my app.

Thanks a lot for the help.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.