CSS Map example

by chodorowicz

HTML

<div id="wrapper">
    <a href="cnn.com"> <div id="pos1"></div></a>
    <a href="cnn.com"> <div id="pos2"></div></a>
</div>

CSS

a{
    color:white;
}
#wrapper{
    background:white url(http://www.toystore.info/images/American-Retro-Police-Car.jpg) no-repeat 0 0;
    position:relative;
    z-index:0;
    width:400px;
    height:400px;
}

#pos1{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:110px; 
}
#pos2{
    position:absolute;
    width:50px;
    height:50px;
    bottom:50%;
    left:60%;
}
#pos1:hover, #pos2:hover{
    border:1px solid red;
}