javascript - JavaScript 图像映射代码不起作用

Question

这段代码有什么问题？为什么我的图像映射不起作用？

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

        var mymap = document.createElement('map');
        mymap.name = 'testmap';
        document.body.appendChild(mymap);

        var areatag = document.createElement('area');
        areatag.shape = 'rect';
        areatag.coords = '900,200,1100,1000' ;
        areatag.href =   'http://www.google.com';
        mymap.appendChild(areatag);
        document.body.appendChild(areatag);

        return img;
   }

更新：

我像这样重建了我的代码，但它仍然不起作用：

 function createimg()
 {
         var img = new Image();
       img.src='link/to/image';
       img.alt='Next image';
       img.id = 'span1';
       img.style.zIndex = 10;
       img.style.position = 'absolute';
       img.style.display='block';
       img.style.top = '130px';
       img.style.padding='10px';
       img.style.left='440px';
       img.usemap='#testmap';
       img.className ='dynamicSpan';


        var mymap = document.createElement('map');
        mymap.name = 'testmap';
        mymap.id = 'testmap';


        var areatag = document.createElement('area');
        areatag.shape = 'rect';
        areatag.coords = '0,0,500,500' ;
        areatag.href =   'http://www.google.com';
        areatag.target = '_blank';


        //append area to map
        mymap.appendChild(areatag);
        // append map to document
        document.body.appendChild(mymap);
        //append image to document
        document.body.appendChild(img);

        return img;
   }

Answer 1

您已经创建了元素实例“mymap”，但没有将其添加（未附加）到文档中，就像您为“img”（appendChild）所做的那样。

document.createElement(name) 创建元素的实例，但不将其附加到文档中。

Answer 2

可能是你做事的顺序不好。

我想你应该：

1. 创建 img 元素（+设置其属性）
2. 创建地图元素（+设置其属性）
3. 创建区域元素 (+...)
4. 将区域附加到地图
5. 将地图附加到文档
6. 将图像附加到文档

Answer 3

这是解决方案：

你应该使用

img.setAttribute("usemap", '#testmap')

代替：

img.usemap = "#testmap"

Answer 4

除了维克多的回答：

img.usemap='#testmap';
...
mymap.name = 'testmap';

您可能需要提供mymap一个id“testmap”