CODEWITHSUNDEEP
javascriptimagemap
Tony The Lion
Tony The Lion

Reputation: 63190

JavaScript imagemap code doesn't work

What is wrong with this code? Why is my imagemap not working?

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:

I reconstructed my code like this, but it is still not functional:

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

Upvotes: 0

Views: 661

Answers (4)

Ovaj Onaj
Ovaj Onaj

Reputation: 36

here's the solution:

you should use

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

instead of:

img.usemap = "#testmap"

Upvotes: 1

Ovaj Onaj
Ovaj Onaj

Reputation: 36

it may be that the order in which you do things is not good.

i think you should:

  1. create img element (+set its attrs)
  2. create map element (+set its attrs)
  3. create area element (+...)
  4. append area to map
  5. append map to document
  6. append image to document

Upvotes: 1

geowa4
geowa4

Reputation: 41813

In addition to Viktor's answer:

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

You will probably need to give mymap an id of "testmap"

Upvotes: 0

Viktor Jevdokimov
Viktor Jevdokimov

Reputation: 1056

You have created element instance "mymap", but didn't added (not appended) it to the document, as you did it for "img" (appendChild).

document.createElement(name) creates an instance of element, but not appends it to the document.

Upvotes: 1

Related Questions