create imagemap with Javascript - Stack Overflow

admin管理员组

文章数量:1415664

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 ="" target ="_blank" alt="Sun" />

    <area shape ="circle" coords ="100,100,10,10"
     href ="" 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.

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." target ="_blank" alt="Sun" />

    <area shape ="circle" coords ="100,100,10,10"
     href ="http://www.twitter." 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.

• javascript
• imagemap

Share Improve this question Follow edited Oct 8, 2009 at 9:49 Tony The Lion asked Oct 8, 2009 at 9:29 Tony The LionTony The Lion 63.4k7070 gold badges251251 silver badges423423 bronze badges 1

• 2 Since they are linked by the name, you could have it anywhere in your HTML. And since the map doesn't do anything or show up if it never gets tied to an image, you could have it just in the HTML ahead of time, with no need for the javascript except for adding the usemap to the image. – Anthony Commented Oct 8, 2009 at 9:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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...

http://www.w3/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.

本文标签： create imagemap with JavascriptStack Overflow