JavaScript圖像地圖代碼不起作用

此代碼有什麼問題？爲什麼我的圖片不起作用？JavaScript圖像地圖代碼不起作用

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

UPDATE：

我重建我這樣的代碼，但它仍然無法正常運行：

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

來源

2009-10-08 Tony The Lion

請詳細說明問題（是否有任何錯誤，什麼不起作用等） – 2009-10-08 12:27:55

imagemap不是在圖像上創建的。無法點擊它！ – 2009-10-08 12:45:50

這裏的解決方案：

你應該使用

img.setAttribute（「USEMAP」， '#testmap'）

代替：

img.usemap = 「#testmap」

來源

2009-10-08 14:20:26

非常感謝您修復它！它現在工作！ :) :) :) – 2009-10-08 14:53:37

剛發現...它也可能是 img.useMap - >但請注意這種情況。事情是，HTML不區分大小寫，但JS是。所以在html中它可以是usemap，USEMAP，useMap，UsEmAp等，在JS中它必須是useMap。幸運的是，setAttribute設置html屬性。所以這種情況（再次）並不重要。 – 2009-10-08 17:00:03

您已經創建元素實例「MyMap中」，但並沒有增加（未附加）到文檔中，就像您爲「img」（appendChild）所做的那樣。

document.createElement（name）創建元素的實例，但不將其附加到文檔。

來源

2009-10-08 12:29:13

我現在已經這麼做了...但沒有區別。仍然沒有圖像映像在我的圖像？還有其他什麼是錯的？ – 2009-10-08 12:46:31

除了Viktor's answer：

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

你可能會需要給mymap「testmap」

來源

2009-10-08 12:34:08 geowa4

這可能是因爲在你做事的順序是不好的id。

我想你應該：

創建img元素（+設置其ATTRS）
創建地圖元素（+設置其ATTRS）
創建面積元（+ ...）
追加區域映射
追加地圖記錄
追加圖像記錄

來源

2009-10-08 13:00:23

JavaScript圖像地圖代碼不起作用

回答

相關問題