How to Find which Image Map Area Clicked

Hi Folks,

I wanted to find out which area has been clicked on the Image map thru Javascript. How do I do that?

I need to evaluate if lets say Validate area has been clicked or not.

 <map name="0110">
    <area shape="rect" coords="14,82,161,388" href="#validate" alt="Validate">
    <area shape="rect" coords="164,80,313,388" href="#request" alt="Request">
    <area shape="rect" coords="316,78,461,394" href="#need" alt="need">

  </map>

if (href="validate"){
 alert("Correct");
}

Open in new window

rgarimellaAsked:
Who is Participating?
 
HainKurtSr. System AnalystCommented:
or maybe something like this

<img src="your_img_name.gif" usemap="#0110" alt="Click your answer" width=400 height=400/>
<map name="0110">
    <area shape="rect" coords="14,82,161,388" href="#" alt="Validate" onClick="return checkArea('A')">
    <area shape="rect" coords="164,80,313,388" href="#" alt="Request" onClick="return checkArea('B')">
    <area shape="rect" coords="316,78,461,394" href="#" alt="need" onClick="return checkArea('C')">
</map>
<script>
function checkArea(m){
	if (m=="B"){
		alert("Correct.");
	} else {
		alert("Not Correct!");
	} 
	return false;
}
</script>

Open in new window

0
 
dimmergeekCommented:
<img src="your_img_name.aaa" usemap="#0110" alt="Click your answer"/>

<map name="0110">
    <area shape="rect" coords="14,82,161,388" onclick="setHREF('validate');" alt="Validate">
    <area shape="rect" coords="164,80,313,388" onclick="setHREF('request');" alt="Request">
    <area shape="rect" coords="316,78,461,394" onclick="setHREF('need')" alt="need">
</map>

<script type="text/javascript" language="javascript">
var hrefVal;
function setHREF(value)
{
     hrefVal = value;
     if (hrefVal=="validate")
          alert("Correct");
}
</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.