Image Map (no map)

by Curt

HTML

<div class="map">
    <a href="#redirect" class="redirect"></a>
    <a href="#close" class="close"></a>
</div>

CSS

.map
{
    background-image:url('http://placehold.it/300x300');
    background-repeat:no-repeat;
    width:300px;
    height:300px;
    position:relative;
}
.map > a
{
    position:absolute;
}
.map > a.redirect
{
    top:0;
    left:0;
    width:300px;
    height:300px;
}
.map > a.close
{
    top:20px;
    left:240px;
    width:50px;
    height:50px;
}

JavaScript

$(function(){
    $(".map > a.redirect").click(function(e){
       e.preventDefault();
        alert("redirect");
    });
    $(".map > a.close").click(function(e){
       e.preventDefault();
        alert("close");
    });
});