使用 Javascript 创建图像地图

Question

当使用 Javascript 创建图像时，有没有办法在图像上创建图像映射？

所以图像是这样创建的：

var img = new 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;
  }

这位于内部标签中。现在图像地图：

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

现在我应该把它放在哪里，因为它必须在图像的正下方，根据我读过的内容？我不能把它放在标签里，因为那不起作用。

Answer 1

首先，

如何在 Javascript 中创建图像？

但是关于你的问题......

图像映射与<img /> 元素相关联，而不是实际图像本身。因此，即使您有一种在 javascript 中创建图像的方法，您是如何将该图像放置在页面中的？

如果图像被推送到服务器并因此具有 URL，那么您可以在 DOM 中创建一个 img 元素，然后制作您的图像映射。

事实上，您甚至可以在创建图像之前获得图像映射，因为将映射与图像联系起来的只是属性usemap，它指向map 元素的name 属性。

快速编辑

我想我现在明白了。您所指的Image() 方法只是创建一个img 元素，对吧？

所以基本上，您只需添加属性/属性usemap 并将其设置为您要使用的<map> 的名称。

要使用 David 的方法，您可以使用以下内容：

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

Answer 2

http://www.w3.org/TR/html4/struct/objects.html#h-13.6 解释了 HTML 结构。您只需要直接在 DOM 中而不是在 HTML 中构建该结构。

Opera WSC 里面对 DOM 有很好的介绍。