Du kan evt. prøve denne her. Load et billede og klik det sted, du ønsker som 'centrum' for dit klikbare område ... det sætter koordinaterne. Derefter retter du bredde og højde og klikker 'Lav Map'.
Du kan teste dit map ved at klikke 'Test Map', hvilket åbner et vindue med billede og map:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>OleBole ImageMapper</title>
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
}
</style>
<script type="text/JavaScript">
var d=document;
function gE(id){return d.getElementById(id)};
function pI(n){return parseInt(n)};
function loadPic(path) {
oPic.src = path;
oPic.style.display = "block";
}
function getPos(elm) {
for(var x=y=0;elm!=null;x+=elm.offsetLeft,y+=elm.offsetTop,elm=elm.offsetParent);
return {x:x,y:y};
}
function setCoords(pic, e) {
var pos = getPos(oPic);
e = e||window.event;
iC.value = (e.clientX-pos.x)+","+(e.clientY-pos.y);
}
function makeMap() {
if (!iC.value.match(/^[\d]+,[\d]+$/)) return;
var s, x1, x2, y1, y2, pos, css, a = iC.value.split(",");
x1 = Math.round(pI(a[0])-(pI(iW.value)/2));
y1 = Math.round(pI(a[1])-(pI(iH.value)/2));
x2 = x1 + pI(iW.value);
y2 = y1 + pI(iH.value);
s = "<map name=\"MAP_NAME\">\n";
s += " <area shape=\"rect\" coords=\""+x1+","+y1+","+x2+","+y2+"\" alt=\"\" href=\"#\">\n";
s += "</map>\n";
tM.value = s;
pos = getPos(oPic);
css = rect.style;
css.left = (x1+pos.x)+"px";
css.top = (y1+pos.y)+"px";
css.width = pI(iW.value)+"px";
css.height = pI(iH.value)+"px";
css.display = "block";
}
function testMap() {
var s, doc = win.document;
if (tM.value=="") return win.close();
s = "<img src=\""+oPic.src+"\" border=\"0\" usemap=\"#MAP_NAME\">\r\n";
s += tM.value;
doc.open();
doc.write(s);
doc.close();
}
var oPic=iW=iH=iC=tM=win=null;
window.onload = function() {
oPic = gE("pic");
iW = gE("w");
iH = gE("h");
iC = gE("c");
tM = gE("m");
rect = gE("dRect");
oPic.onclick = function(){setCoords(this, event)};
}
</script>
</head>
<body>
<div id="dRect" style="position:absolute;border:1px dashed red;display:none;z-index:10"> </div>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Billede:<br><input id="p" type="file" onchange="loadPic(this.value)"></td>
</tr>
<tr>
<td>Bredde:<br><input id="w" type="text" value="100"></td>
</tr>
<tr>
<td>Højde:<br><input id="h" type="text" value="100"></td>
</tr>
<tr>
<td>Koordinater:<br><input id="c" type="text"></td>
</tr>
<tr>
<td><button onclick="makeMap()">Lav Map</button>
<button onclick="win=window.open('about:blank','win');setTimeout('testMap()',20)">Test Map</button></td>
</tr>
<tr>
<td><img id="pic" src="" style="display:none"></td>
</tr>
<tr>
<td>Map:<br><textarea id="m" style="width:600px;height:100px;"></textarea></td>
</tr>
</table>
</body>
</html>
Det er et ganske simpelt script, der lige er hakket af på 10 minutter. Det kan således kun håndtere rektangler - og kun ét ad gangen.
Du kan dog bare oprette et map og kopiere det over i et andet dokument. Nu kan du efterfølgende oprette andre area's og ligeledes kopiere dem over. Det kommer til at se ud noget à la:
<map name="MAP_NAME">
<area shape="rect" coords="9,11,109,111" alt="" href="#">
<area shape="rect" coords="184,107,234,157" alt="" href="#">
<area shape="rect" coords="67,347,227,377" alt="" href="#">
</map>
Det kan du evt. kopiere tilbage i textarea'et og teste dit map, hvis du vil.
Det er simpelt, men det virker ... og er gratis :)
