How to make some part of image clickable using HTML?

Question

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>

Maybe this link can help you: https://stackoverflow.com/questions/18560097/how-to-make-a-section-of-an-image-a-clickable-link Also this is a possible duplicate. — Ingus, Dec 20 '18 at 08:12
_This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. This can often be avoided by identifying and closely inspecting the shortest program necessary to reproduce the problem before posting._ — mplungjan, Dec 20 '18 at 08:30

DreamTeK · Answer 1 · 2018-12-20T08:37:30.347

1

The code works fine if you clean it up. You where using the wrong quotation marks.

Html uses " " (straight double quotes)

Typography uses “ ” (opening and closing double quotes)

<img src="https://i.imgur.com/YWNyGHD.png" width="538" height="480" 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" href="https://en.wikipedia.org/wiki/Greater_Khorasan" title="khorasan">
</map>

edited Dec 20 '18 at 08:37

answered Dec 20 '18 at 08:32

DreamTeK

32,537
27
112
171

Do you know how can i make the clickable area colorful while hovering? – Nebula Dec 25 '18 at 18:13
1

This would require javascript. Have a look at this plugin. http://www.outsharked.com/imagemapster/default.aspx?demos.html – DreamTeK Jan 02 '19 at 08:54

score 0 · Accepted Answer · answered Dec 20 '18 at 08:29

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>

how can i make the clickable area colorful while hovering? and i want it to be transparent. — Nebula, Dec 25 '18 at 09:44

How to make some part of image clickable using HTML?

2 Answers2