Map Links with Div

by moratto

HTML

<div id="progress"> <a id="link1" title="Symbol Link" href="#">Symbol Link</a>
 <a id="link2" title="Stack Link" href="#">Stack Link</a>
 <a id="link3" title="Overflow Link" href="#">Overflow Link</a>

</div>

CSS

#progress {
    width: 257px;
    height: 84px;
    background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
    position:relative;
}
a#link1, a#link2, a#link3 {
    display: block;
    overflow: hidden;
    position: absolute;   
    background: transparent;
    text-indent: -9999px; 
}
#link1 {
    left: 10px;
    width: 45px;
    height: 84px;

}
#link2 {
    left: 55px;
    top: 45px;
    width: 70px;
    height: 39px;    
}
#link3 {
    top: 45px;
    left: 124px;
     width: 130px;
     height: 39px;    
}