Question

这段代码有什么问题？为什么我的imagemap无效？

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

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

我认为你应该：

创建img元素（+设置其attrs）
创建地图元素（+设置其attrs）
创建区域元素（+ ...）
将地区附加到地图
将地图附加到文档
将图片附加到文档

Answer 3

这是解决方案：

你应该使用

img.setAttribute（“usemap”，'＃testmap'）

而不是：

img.usemap =“＃testmap”

Answer 4

除了Viktor's answer：

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

您可能需要mymap id“testmap”

JavaScript图像映射代码不起作用

4 个答案: