Dynamically create Image map via javascript

Question

UPDATE I've compare objects in the debugger and it seems the map element is not a child of the img. However removing img.appendChild(map); still didn't get it to work. To be complete - along with the accepted answer, I had to add div.appendChild(map); so that the map has a parent.

I am trying to dynamically create an image area map. I have a jsFiddle of the code below: Here. I have successfully been able to generate a static map and bind a mouseover on the area via js, but I can't seem to create the map from scratch. I am using pure js. Any help would be appreciated.

<head>
<script>
    function function1() {  
    var img = document.getElementById("myImg");
    var map = document.createElement("map");
    map.name = "myMap";

    var area = document.createElement("area");
    area.shape = "rect";
    area.coords = "0,0,100,50"
    area.onmouseover = function(){alert("over")};

    map.appendChild(area);

    var div = document.getElementById("div");
    div.appendChild(map);

    img.usemap = "#myMap";
    }    


</script>
</head>
<body>
    <div id="div">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"
         id="myImg" 
         alt="Image" 
         width="350" 
         height="150"> 
    <br>
    <input type="button" value="Make area active" onClick="function1();">
    </div>

</body>

score 0 · Answer 1 · answered Feb 17 '16 at 04:28

0

You can use code below. In case you want to change the co-ordinates you can call javascript on body load or on some other events.

 <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="1.htm" alt="1">
  <area shape="circle" coords="90,58,3" href="2.htm" alt="2">
  <area shape="circle" coords="124,58,8" href="3.htm" alt="3">
</map>

Thanks

answered Feb 17 '16 at 04:28

Amit Shah

1,380
1
10
19

1

Thanks for the reply. I need to dynamically create the map on the fly with js and not have it coded in HTML. I have been able to get it to work as you have, just to test the concept, but that is not enough. – mseifert Feb 17 '16 at 04:34
@mseifert the thing is that, when you want to create the co-orinates dynamically you need to just modify the DOM, and need to place the new area and its shape add to the map and it will work, do you want me to create an example for you? – Amit Shah Feb 17 '16 at 04:36
Yes please. Be aware that in my app, I don't even have HTML for the image. It is 100% js and creates every element from scratch. After an image is loaded, I go back and add the map to it. So I can't have any HTML beyond the image for this example. – mseifert Feb 17 '16 at 04:43

score 0 · Accepted Answer · edited May 23 '17 at 11:50

You need to use setAttribute instead of dot notation for setting the usemap attribute. That is, change the last line to this:

img.setAttribute('usemap', "#myMap");

I'm not sure why this is necessary, perhaps someone can add clarification as to why this standard attribute cannot be set using dot notation and requires setAttribute.

See also this question, in particular the second answer: When to use setAttribute vs .attribute= in JavaScript?

P.S. If your application uses a lot of DOM manipulation, then I'd recommend using a DOM library such as jQuery or Zepto; they will resolve issues like this for you and also any browser compatibility issues.

Thank you! I will read the linked info on SetAttribute. For the record, I also had to add `div.appendChild(map);` so that the map had a parent. — mseifert, Feb 17 '16 at 05:11

Dynamically create Image map via javascript

2 Answers2

Linked

Related