Click on image map and show alert box???

[goldy300]

I'm tying to get each state of Australia to alert the state when I click on the state. I'm not sure how to do this but here's my efforts.

<script type="text/javascript">
function getValue(){
{
document.getElementById("nsw").coords="213,170,272,170,275,166,281,166,290,172,295,165,309,165,299,202,291,210,292,218,281,230,281,241,267,235,264,226,254,228,244,227,220,213,214,213";
alert("This is the State NSW");
}
var qld = (document.getElementById("qld"));
var sa = (document.getElementById("sa"));
var nt = (document.getElementById("nt"));
var vic = (document.getElementById("vic"));
var wa = (document.getElementById("wa"));
var tas = (document.getElementById("taz"));
var act = (document.getElementById("act"));
}
</script>

<center>
  <img src ="images/aus.jpg" border="none"
width ="316" height ="300"
alt="Australia"
usemap ="#ausmap" />
  <map id ="ausmap" name="ausmap">
        
  <area id="nt" shape="poly" coords="191,65,175,54,186,31,181,21,172,30,154,23,147,18,129,23,135,33,125,47,124,55,125,143,191,144,192,64" href="#" alt="Northen Territory">
  
  <area shape="poly" id="wa" coords="124,51,112,42,92,46,88,57,82,63,71,70,74,78,64,91,26,98,8,115,5,134,7,150,12,166,18,174,18,183,25,192,22,206,18,216,37,225,60,215,84,215,101,201,116,199,124,193,123,51" href="#" alt="Western Australia">

  <area shape="poly" id="sa" coords="124,143,213,145,213,249,182,230,155,199,139,194,124,195" href="#" alt="South Australia">

  <area shape="poly" id="qld" coords="192,64,208,75,217,54,213,43,222,15,237,46,247,49,257,89,274,96,306,137,307,164,295,164,291,172,282,166,276,166,273,169,213,170,213,145,191,144" href="#" alt="Queensland">
  
  <area    id="nsw"
        coords = "213,170,272,170,275,166,281,166,290,172,295,165,309,165,299,202,291,210,292,218,281,230,281,241,267,235,264,226,254,228,244,227,220,213,214,213");
        shape="poly"
        value="New South Wales" 
        href="#" 
        alt="New South Wales">

  <area shape="poly" id="vic" coords="213,213,248,228,263,227,266,235,281,242,264,246,254,256,239,249,230,254,222,249,213,249" href="#" alt="Victoria">

  <area shape="poly" id="tas" coords="265,259,255,271,234,258,250,292,264,289,270,274" href="#" alt="Tasmania">

  <area shape="circle" id="act" coords="274,224,4" href="#" alt="Australian Capital Territory">
  </map>
</center>

 

[misson]

Have you tried using a Javascript URI ?

<area shape="circle" id="act" coords="274,224,4" href="javascript:void(getValue(this.id))" alt="Australian Capital Territory">

Have you tried setting the onlick handler for an area element?

<area shape="circle" id="act" coords="274,224,4" nohref onclick="getValue(this.id)" alt="Australian Capital Territory">

NB: if you use the href attribute with a Javascript URI, have getValue stop event propagation, cancel the default handler and return false rather than having to wrap each call in a "void()".

The "area" element has no value attribute. If you want to store the name of a state in an area, the "alt" or "title" attributes would be appropriate. The latter attribute would also give you the state name as a tooltip on many browsers.