Clickable stickers sticking out of a notebook

by

I’m trying to make clickable buttons that look like they’re stickers sticking out of a notebook. Here’s how it looks like:

enter image description here

What’s the best way to do this? Should each of them be PNG images with transparent backgrounds? That would work only if I rotated the images and made them small, but I’m afraid to use CSS3 for image rotation since that might not be supported in older browsers like IE5.

Also, how do I make the menu button that is on the left clickable as whole (I mean, not just the text)? Should I use an image that is positioned using position: absolute; ?

Thanks in advance!

Answer

For the some link part, 2 solutions.
1. Make the whole an image and use CSS positioning (and if needed z-index) to position it.
2. Use a simple a href and give it a width + heigth and a background which is the image.

for the twitter facebook part.
1. CSS rotation as stated above.
2. If you really want it IE5/6 compatible it is a good idea to use a good ol fashion imagemap. If you use a HTML editor like lets say dreamweaver you can draw your clickable area from point to point.

Attribution
Source : Link , Question Author : Eustace , Answer Author : Luuk

Leave a Comment