Le code de l'imagemap JavaScript ne fonctionne pas

Question

Quel est le problème avec ce code? Pourquoi mon imagemap ne fonctionne-t-il pas?

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

MISE À JOUR:

Je reconstruit mon code comme celui-ci, mais il ne fonctionne toujours pas:

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

est ici la solution:

vous devez utiliser

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

au lieu de:

img.usemap = "#testmap"

Answer 2

Vous avez créé élément instance "mymap", mais n'a pas ajouté (non ajouté) au document, comme vous l'avez fait pour "img" (appendChild). Document.createElement (nom) crée une instance d'élément, mais ne l'ajoute pas au document.

Answer 3

En plus de Viktor's answer:

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

Vous aurez probablement besoin de donner un mymapid de « testmap »

Answer 4

il se peut que l'ordre dans lequel vous faites les choses n'est pas bon.

je pense que vous devez:

1. créer l'élément img (+ set ses attrs)
2. créer élément de carte (+ set ses attrs)
3. créer des éléments de surface (+ ...)
4. zone append à la carte
5. carte append to document
6. image append to document