How to Find which Image Map Area Clicked

Posted on 2012-08-29
Last Modified: 2012-08-29
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">


if (href="validate"){

Open in new window

Question by:rgarimella
    LVL 7

    Assisted Solution

    <img src="" 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">
    <script type="text/javascript" language="javascript">
    var hrefVal;
    function setHREF(value)
         hrefVal = value;
         if (hrefVal=="validate")

    Open in new window

    LVL 51

    Accepted Solution

    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')">
    function checkArea(m){
    	if (m=="B"){
    	} else {
    		alert("Not Correct!");
    	return false;

    Open in new window


    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now