create imagemap with Javascript

Question

Dear all,

Is there a way to create an imagemap on an image when the image is created in Javascript?

So image is created this way:

var img = new Image();

then set all properties.

But how do I now create an imagemap on this image?

Regards, Tony

UPDATE

Here's my code to create image:

  function createimg()
  {
       var img = new Image();
       img.src='Image/URL';
       img.alt='Next image';  
       img.id = 'span1';
       img.style.zIndex = 10;
       img.style.position = 'absolute';  
       img.style.display='none'; 
       img.style.top = '130px';
       img.style.padding='10px'; 
       img.style.left='440px'; 
       img.usemap='#trialmap';   
       img.className ='dynamicSpan';
       document.body.appendChild(img);
       return img;
  }

This sits in inside tags. Now imagemap:

<map name="trialmap">
    <area shape ="rect" coords ="0,0,500,500"
     href ="http://www.google.com" target ="_blank" alt="Sun" />

    <area shape ="circle" coords ="100,100,10,10"
     href ="http://www.twitter.com" target ="_blank" alt="Mercury" />
</map>

Now where do I put this, cause it has to be right beneath the image, per what I have read? I cannot put it inside a tag, cause that does not work.

Answer 1

http://www.w3.org/TR/html4/struct/objects.html#h-13.6 explains the HTML structure. You just need to build that structure directly in DOM instead of in HTML.

The Opera WSC has a good introduction to DOM in it.

Answer 2

First,

How do you create an image in Javascript?

But on to your question...

An image map is tied to the <img /> element, not the actual image itself. So even if you have a method for creating an image in javascript, how are you placing that image in the page?

If the image is being pushed to the server and therefore has a URL, you could then create an img element in the DOM, and then make your image map.

In fact, you could even have the image map before the image was ever created, since all that ties the map to the image is the attribute usemap which points to the name attribute of the map element.

Quick Edit

I think I understand now. The Image() method you are referring to is simply creating an img element, right?

So basically, you just need to add the attribute/property usemap and set it to the name of the <map> you want to use.

To use David's method, you would go with something like:

//This assumes the image will go in some div with the id of "image-box"

var imageBox = getElementById("image-box");
var myImage = createElement("img");
myImage.id = "myImage";
myImage.src = "myimage.png";
myImage.useMap = "#myImageMap";
imageBox.appendChild(myImage); 

//Now you would need to have a map element with a name of myImageMap

var myMap = createElement("map");
myMap.name = "myImageMap";
imageBox.appendChild(myMap);

//Obviously you would want to then fill the map using the appendChild method with the area elements that make it useful...