generate area of map tag and make it different when on mouseenter function

**dedtadeas** · 11-04-2012 09:43 AM

Hello, i have probleme to generate <area> tags inside <map>, idea is quite simple:
I would like to take image and divide its map into 12 area depending on picture size(height, width)
Here is my code (not functional):

<body onload="load()">
<img id="img" src="IMAGES SRC" usemap="#map"/>
<map name="map" id="map"></map>
<script language='javascript'>
function load() {
img = getElementById(img);
var h2 = img.height/3;
var w1 = img.widht/4;
for (var i = 0; i <= 2; i++) {
var y = i*h2;
var p = ++i;
for (var j = 0; j <= 3; j++){
var x = j * w2;
var f = ++j;
el = document.createElement('area');
el.setAttribute('shape', 'rect');
el.setAttribute('id', j + i);
el.setAttribute('coords', x + ',' + y + ',' + f * w2 + ',' + p * h2);
el.setAttribute('href', j+i +'.html');
document.getElementById('map').appendChild(el);
};
};
};
</script>

Next question is if it is possible to make <area> active when i go with mouse over them.
THANK YOU for any help

**vwphillips** · 11-04-2012 10:27 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/
function Test(txt){
document.Show.Show2.value=txt;

}
/*]]>*/
</script></head>

<body>
<img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" usemap="#map" width="400" height="300"/>
<map name="map" id="map">
 <area shape="rect" coords="0,0,40,40" onmouseover="Test('area 1');" onmouseout="Test('out');"/>
 <area shape="rect" coords="360,260,400,300" onmouseover="Test('area 2');" onmouseout="Test('out');"/>
</map>
<input type="button" name="" value="ReSize"  onmouseup="resize('img','map',200,200);"/>


<script type="text/javascript">
function resize(img,map,w,h) {
 var img=document.getElementById(img),map=document.getElementById(map),iw=img.width,ih=img.height,as=map.getElementsByTagName('AREA'),c,z0=0,z0a;
 for (;z0<as.length;z0++){
  c=as[z0].coords.split(',');
document.Show.Show0.value=c;
  for (z0a=0;z0a<c.length;z0a++){
   c[z0a]=Math.round(z0a%2==0?c[z0a]/iw*w:c[z0a]/ih*h);
  }
  as[z0].coords=c.join(',');
document.Show.Show1.value=c;
 }
 img.width=w;
 img.height=h;
}

</script>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=100 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>

Thread: generate area of map tag and make it different when on mouseenter function

Thread Tools

Display

generate area of map tag and make it different when on mouseenter function

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions