Entry
How can I zoom an IMG element with an associated MAP element?
Feb 15th, 2009 21:34
Inschi jelii, Martin Honnen,
With NN6 and IE4+ you can zoom in and out of an image and synchronously
alter the coords of the AREA elements in the associated MAP.
Here is the code:
<HTML>
<HEAD>
<TITLE>
zoom an image map
</TITLE>
<SCRIPT>
function zoomImage (imageElement, xFactor, yFactor) {
imageElement.width =
Math.round(document.imageName.width * xFactor);
imageElement.height =
Math.round(document.imageName.height * yFactor);
if (imageElement.useMap)
zoomMap (imageElement.useMap.substring(1), xFactor, yFactor);
}
function zoomMap (mapName, xFactor, yFactor) {
if (document.all) {
var map = document.all[mapName];
var areas = map.all.tags('AREA');
}
else if (document.getElementsByName) {
var map = document.getElementsByName(mapName)[0];
var areas = map.getElementsByTagName('AREA');
}
if (areas) {
for (var a = 0; a < areas.length; a++) {
var coords = areas[a].coords.split(/\s*,\s*/);
if (areas[a].shape.toLowerCase() == 'rect' ||
areas[a].shape.toLowerCase() == 'poly') {
for (var p = 0; p < coords.length; p += 2) {
coords[p] = Math.round(coords[p] * xFactor);
coords[p + 1] = Math.round(coords[p + 1] * yFactor);
}
}
else if (areas[a].shape.toLowerCase() == 'circle') {
coords[0] = Math.round(coords[0] * xFactor);
coords[1] = Math.round(coords[1] * yFactor);
coords[2] = Math.round(coords[2] * (xFactor < yFactor ? xFactor
: yFactor));
}
areas[a].coords = coords.join(', ');
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="zoom in"
ONCLICK="zoomImage (document.imageName, 2, 2);"
>
<INPUT TYPE="button" VALUE="zoom out"
ONCLICK="zoomImage (document.imageName, 0.5, 0.5);"
>
<BR>
<IMG NAME="imageName"
SRC="kiboInside.gif"
USEMAP="#aMap"
WIDTH="100"
HEIGHT="100"
>
<MAP NAME="aMap">
<AREA HREF="http://www.kibo.com"
SHAPE="rect"
COORDS="0, 0, 50, 50"
>
<AREA HREF="http://javascript.faqts.com"
SHAPE="circle"
COORDS="75, 75, 25"
>
</MAP>
</BODY>
</HTML>
http://lahjatideoita.blogspot.com
http://ideaspara-regalar.blogspot.com
http://idearegalo1.blogspot.com
http://geschenkeidee.blogspot.com
http://darkovenapady.blogspot.com
