javascriptjqueryonclickareaimagemap

Can I have an onclick event on a imagemap area element?


I would like to put an onclick event on an area element. Here is my setup:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
    <map name="Map">
    <area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>

I have tried 2 different ways to have an onclick event. Firstly i tried this:

$(".blue").click( function(event){
    alert('test');
});

I have also tried this:

function myFunction() {
    alert('test');
}

Neither of the above work. Do area elements support the above, or do they only support having a href?


Solution

  • Pay attention:

    1. Attribute href is obligatory, without it the area-tag does nothing!

    2. To add a click event, you'll need to block default href.


    Your code should start as follows:

    $(".blue").on("click", function(e){
        e.preventDefault();
        /*
           your code here
        */
    });
    

    Live example here.