Irregular Shaped Anchor (AKA Hotspot or Image Maps) With CSS Tutorial
Someone asked this question the other day in a forum I frequent. "How to make a circular shaped clickable area?"; in other words, a non-rectangular link. Ahhh - something new I thought - so I jumped on it! Here is what I came up with. You can get as precise as you wish. For instance, if you wanted to cover every single pixel of the circle with the anchor, then you would just make each <b> 1px wide. After looking at the demo, I'm sure you get the idea. Basically, using this technique, you can create any shape you need.
Note: you can also do this with an image <map>. After all, thats what this tag was intended for. I've never used it or coded it so I can't vouch for it's difficulty (or ease). Plus, it was a fun CSS exercise and I'm sure it will come in handy someday. Also, as is, this works everywhere except in IE6. In order to work in IE6, you'd have to use classes on all the <b>s, and give each <b> a unique height and only use a bottom value and no top (or visa-versa).
The CSS
li {
float:left;
width:266px;
height:266px;
list-style:none;
position:relative;
background:url(images/circle2.gif);
}
a {
position:absolute;
top:127px;
left:0;
width:264px;
height:10px;
outline:0;
border:1px solid red;
}
a b {
position:absolute;
width:10px;
cursor:pointer;
border:1px solid green;
}
/* going from left to right */
a b {left:0px;top:-16px;bottom:-16px;}
a b+b {left:11px;top:-52px;bottom:-52px;}
a b+b+b {left:22px;top:-71px;bottom:-71px;}
a b+b+b+b {left:33px;top:-84px;bottom:-84px;}
a b+b+b+b+b {left:44px;top:-95px;bottom:-95px;}
a b+b+b+b+b+b {left:55px;top:-104px;bottom:-104px;}
a b+b+b+b+b+b+b {left:66px;top:-111px;bottom:-111px;}
a b+b+b+b+b+b+b+b {left:77px;top:-116px;bottom:-116px;}
a b+b+b+b+b+b+b+b+b {left:88px;top:-121px;bottom:-121px;}
a b+b+b+b+b+b+b+b+b+b {left:99px;top:-124px;bottom:-124px;}
a b+b+b+b+b+b+b+b+b+b+b {left:110px;top:-126px;bottom:-126px;}
a b+b+b+b+b+b+b+b+b+b+b+b {left:121px;top:-128px;bottom:-128px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b {left:132px;top:-128px;bottom:-128px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:143px;top:-126px;bottom:-126px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:154px;top:-124px;bottom:-124px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:165px;top:-121px;bottom:-121px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:176px;top:-116px;bottom:-116px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:187px;top:-110px;bottom:-110px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:198px;top:-103px;bottom:-103px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:209px;top:-94px;bottom:-94px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:220px;top:-83px;bottom:-83px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:231px;top:-69px;bottom:-69px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:242px;top:-50px;bottom:-50px;}
a b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b+b {left:253px;top:-15px;bottom:-15px;}
The HTML
<ul> <li><a href="#"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></a></li> </ul>
