Create html area for map in javascript

JavaScript
1

I have had success using html maps and areas. The way I have done it in the past is to simply write the map tags, then inside that, put the area tags.

My current problem however, is a bit more complicated. I want to create the areas for a particular map with javascript. I will have the following map:

<map id=“pm0102” name=“pm0102”> <area name=“area” id=“pa01021” shape=“poly” alt=“Sun” onclick=“alert(‘bla’)”/></map>
<map id=“pm0102” name=“pm0102”></map>

I need to create an area for it. So I first write (inside a function that I call)

map1 = document.getElementById(“pm0101”)

But how can I now create an area for this map in javascript? Does it go something like the following?

map1.areas = ‘<area name=“area” id=“pa01011”/>’

I may need to have multiple areas.

Thanks,

Sam

2

Hi Sam,

First, this sounds like the kind of thing someone’s likely already built.

Second, while it sounds like you mean HTML image maps and not geological maps, this ALA article might still help you, because it sounds like your areas are being dynamically created, right? (otherwise you’d just write this in static HTML):

Third…


<map id="pm0102" name="pm0102"> <area name="area" id="pa01021" shape="poly" alt="Sun" onclick="alert('bla')"/></map>
<map id="pm0102" name="pm0102"></map>

I need to create an area for it. So I first write (inside a function that I call)

map1 = document.getElementById("pm0101")

You know each element on the page needs its own id, right?

But yeah, you could make an array of map elements (getElementsByTagName(“map”)
and cycle through each map element and add your areas using
createElement(“area”)

Ideally that would be a separate “helper” function, something that, all it does is make areas and all the attributes the tag has (id, name, shape).

As you cycle through each map of your nodeList (you’d get a nodeList of maps with getElementsByTagName), you add to each map an area, and set the special information of each area there (I don’t know where you’re getting the data, but again the linkk above might help with that). The onclick function would also be defined elsewhere, and referenced by the area elements.

Personally, I like CSS maps anyway… more accessible, usually load faster, and work even for me, who has scripts disabled most of the time. Only thing is, they cannot have dynamic properties. If possible, see if you can’t start with a working HTML/CSS based image map, then layer JS on top of that.