I want to build a little search picture. So I have defined using mapping some areas in a picture and with Mapster so I am able to select them.
Now I need a possibility to establish an alert if ALL 10 areas are selected. Something like: Congratulations, you have find everything.
Here is the code:
<img id="Map" src="bilderraetsel_gross.jpg" border="0" width="1000" height="750" orgWidth="1000" orgHeight="750" usemap="#Map" alt="Bilderraetsel" />
<script>
$(document).ready(function ()
{
$('#Map').mapster({
singleSelect : false,
highlight : null,
mapKey : 'data',
altImage : null,
isDeselectable : false,
fill : true,
fillColor: '0080FF',
fillOpacity : 0.5,
});
});
</script>
<map name="Map" id="Map">
<area style="cursor:crosshair" data="1" shape="circle" coords="641,378,7" href="#">
<area style="cursor:crosshair" data="2" shape="circle" coords="918,642,11" href="#">
<area style="cursor:crosshair" data="3" shape="circle" coords="32,558,8" href="#">
<area style="cursor:crosshair" data="4" shape="circle" coords="108,584,8" href="#">
<area style="cursor:crosshair" data="5" shape="circle" coords="195,189,15" href="#">
<area style="cursor:crosshair" data="6" shape="circle" coords="436,229,6" href="#">
<area style="cursor:crosshair" data="7" shape="circle" coords="925,346,21" href="#">
<area style="cursor:crosshair" data="8" shape="circle" coords="949,408,13" href="#">
<area style="cursor:crosshair" data="9" shape="circle" coords="295,521,14" href="#">
<area style="cursor:crosshair" data="10" shape="circle" coords="459,309,11" href="#">
</map></p>
In the header I am using this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.imagemapster.js"></script>
Can anybody help me, please?