Image map via javascript.

1 svar · 430 visningar · startad av Fredde Mannen 13 mars 2008

Fredde MannenMedlem sedan nov. 20014 054 inlägg

Frågan13 mars 2008 14:37#1

Jag har ett område där det visas bilder i varierande storlek på sidan.
Nu vill jag skapa en image map, dock inte via html utan via javascript, för att dels kunna räkna ut storlek på bilden och diverse positioner.

Det jag hittils har åstadkommit som jag dock inte vet om det är rätt början..

// the clickable areas of the image, for forward and backward. 
	mapCoordsLeft = '0,0,80,80';
	
            var img = document.getElementById("BoxImage"); // bilden som skall ha image mappen. 

// image mappen.
        img.imageMap=document.createElement("map");
    	img.imageMap.setAttribute("name","BoxImageMap");

// area för mappen.
	var mapArea = document.createElement("area");
	mapArea.setAttribute("shape","rect");
	mapArea.setAttribute("href","javascript:alert('TEST!');");
	mapArea.setAttribute("coords",mapCoordsLeft);

Kanske är ute och cyklar helt och hållet här..

spangoMedlem sedan juni 20008 205 inlägg

13 mars 2008 20:21#2

Nja, riktigt riktigt är det ju inte. img-elementet ska ju ha usemap-attributet pekandes på det som map-elementet har som name (med en brädgård före). Sen måste du lägga till elementen du skapar på lämplig plats i dokumentet. Så typ:

// the clickable areas of the image, for forward and backward. 
var mapCoordsLeft = '0,0,80,80';
// area för mappen
var mapArea = document.createElement("area");
mapArea.setAttribute("shape","rect");
mapArea.setAttribute("href","javascript:alert('TEST!');");
mapArea.setAttribute("coords",mapCoordsLeft);
// skapa imagemap
var imageMap=document.createElement("map");
imageMap.setAttribute("name", "BoxImageMap");
imageMap.appendChild(mapArea); // lägg till area i imagemap
document.body.appendChild(imageMap); // lägg tilll imagemap i dokumentet
// bilden som skall ha image mappen. 
var img = document.getElementById("BoxImage"); 
img.setAttribute("usemap", "#" + imageMap.getAttribute("name"));