Search code examples
htmlimagedictionaryarea

How to make some part of image clickable using HTML?


I've written a code for making a polygon clickable in an image, but it just doesnt work.

Here's my code:

<img src="https://i.imgur.com/YWNyGHD.png" usemap="#mymap" />
<map name="mymap">
    <area shape = “poly” coords = “370, 66, 395, 72, 406, 74, 414, 76, 425,
     89, 441, 106, 461, 105, 462, 117, 460, 124, 465, 138, 461, 152, 449,
     168, 453, 174, 444, 182, 425, 183, 419, 176, 397, 181, 397, 196, 401,
     202, 384, 224, 374, 214, 368, 196, 356, 196, 373, 156, 360, 148, 334,
     156, 350, 145, 356, 133, 347, 125, 346, 103, 355, 93, 385, 103, 380,
     90, 385, 79 379, 72, 369, 73, 370, 66 ” href = “#” title = “khorasan”/>
    </map>


Solution

  • Use double quotes instead of curly quotes

    Feel free to delete your question once you have tested it works:

    <img src="https://i.imgur.com/YWNyGHD.png" usemap="#mymap" />
    <map name="mymap">
        <area shape = "poly" coords = "370, 66, 395, 72, 406, 74, 414, 76, 425,
         89, 441, 106, 461, 105, 462, 117, 460, 124, 465, 138, 461, 152, 449,
         168, 453, 174, 444, 182, 425, 183, 419, 176, 397, 181, 397, 196, 401,
         202, 384, 224, 374, 214, 368, 196, 356, 196, 373, 156, 360, 148, 334,
         156, 350, 145, 356, 133, 347, 125, 346, 103, 355, 93, 385, 103, 380,
         90, 385, 79 379, 72, 369, 73, 370, 66" href = "#" title = "khorasan"/>
        </map>