I've created an imagemap using this generator: http://imagemap-generator.dariodomi.de/
...but the links on each of the icons don't work. Ive no idea why. You can see the map on the homepage of this unfinished site:
http://staging.pixiechildcare.co.uk/index.php
<img src="img/map-lg.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area id="tree" class="shape" alt="dfgdf" title="dfgdgf" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="89,47,146,43,189,73,205,121,165,149,114,143,95,106" />
<area id="cloud" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="610,41,654,62,665,104,648,146,614,175,558,127,565,64" />
<area id="splat" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="915,175,958,202,969,229,958,261,913,305,861,244,873,191" />
<area id="ladybird" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1120,110,1160,130,1172,156,1167,188,1116,241,1066,192,1073,129" />
<area id="ball" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1128,359,1169,377,1182,414,1174,442,1127,488,1083,453,1078,380" />
<area id="music" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="730,362,772,378,786,411,779,445,738,491,681,433,683,390" />
<area id="umbrella" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="519,228,549,237,572,275,568,314,519,363,465,308,480,248" />
<area id="train" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="308,284,344,308,358,347,353,375,306,426,258,370,270,305" />
</map>
in your 'custom.js', you are explicitly preventing any action when clicking on an element that has class shape:
$(".shape").click(function(){
event.preventDefault();
});
remove that and it should work...