1

当使用 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>

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

4

2 回答 2

3

第一的，

你如何在 Javascript 中创建图像？

但是关于你的问题...

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

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

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

快速编辑

我想我现在明白了。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...
于 2009-10-08T09:36:11.827 回答
0

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

Opera WSC在其中对 DOM 进行了很好的介绍。

于 2009-10-08T09:35:26.540 回答