Image map

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<style>
.popup {
    position: absolute;
    width: 320px;
    height: 320px;
    overflow: auto;
    border: 5px solid green;
    display: none;
}
.popup img {
    width: 100px;
}
</style>
</head>
<body>

<map name="a">
  <area shape="rect" coords="198,127,310,163" href="#" data-popup-id="n1" title="area one">
  <area shape="rect" coords="80,129,182,165" href="#" data-popup-id="n2" title="area two">
  <area shape="poly" coords="276,19,463,23,387,216" href="#" title="area three">
  <area shape="poly" coords="578,128,618,118,668,128,638,168,598,158" href="#" title="area four">
</map>
<img usemap="#a" src="adgangaarhus.png">


<div class="popup" id="n1" style="left: 50px; top: 50px">
   <img src="test.jpg" />
</div>

<div class="popup" id="n2"  style="left: 450px; top: 100px">
</div>

<script>
function myclicker () {
    // magic variable "this" that knows which area has been clicked 
    var nid = $(this).attr("data-popup-id");
    // alert("area clicked on:" + nid);
    $("#"+nid).toggle();
    // open that url in some iframe or ....
    // get the data-popup-id of THIS
    
  return false;
}

$("area").click(myclicker)
</script>
</body>
</html>