Image map onmouseover help

**tacolushous** · 03-04-2012 07:57 AM

I've been working on this for days now, so if you can help I'll be extremely grateful. I want to make a map of the world where the countries change colors when you mouse over them. I can cut out all the country shapes and color them in photoshop, but I'm having trouble with the html, css and javascript. I don't want to use css hover because the hover regions are all rectangles. I'd rather have an irregularly shaped hot spot in the shape of a country and have an image of the same country that's colored differently appear onmouseover, then disappear again onmouseout.

Basically, I need to know how to bring up an image at a specified location when mousing over a hotspot at the same location.

This is as far as I've gotten so far, but (problem 1) the image doesn't appear where the hot spot is and (problem 2) I have the famous flickering problem.

Please help.

<html>
<head>

<style type="text/css">
#map
{
position:absolute;
left:0px;
top:0px;
}
ul.countries{
list-style: none;
}
li.safari{
position: absolute;
left:50px;
top:50px;
display: none;
background-image:url('http://www.w3schools.com/images/compatible_safari.gif');
}
#img
{
position:absolute;
left:0px;
top:0px;
}
#bkgndimg
{
position:absolute;
left:0px;
top:0px;
}
</style>

</head>
<body>

<img id="bkgndimg" src="http://www.w3schools.com/images/w3schoolslogo.gif" >

<div="map">
<img id="img" src="http://www.w3schools.com/images/w3schoolslogo.gif" usemap="#map" name="browser" />

<map name="map">
<area shape="circ" coords="50,50,50" href="#" title="example" onMouseOver="document.browser.src='http://www.w3schools.com/images/compatible_safari.gif'"
onMouseOut = "document.browser.src='http://www.w3schools.com/images/w3schoolslogo.gif'" />
</map>

<ul class="countries">
<li class="safari"><a href="#">Safari</li>
</ul>

</body>
</html>

**vwphillips** · 03-05-2012 04:07 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>
<style type="text/css">
/*<![CDATA[*/
.tst {
  position:absolute;left:22px;top:20px;width:351px;height:263px;border:solid black 1px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg);
}

.tst IMG {
 position:absolute;z-Index:101;width:351px;height:263px;border-Width:0px;
}


/*]]>*/
</style></head>

<body>
  <div id="tst3" class="tst" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="WinterPalace" usemap="#ImageMap3" ismap="ismap" style="z-Index:101;" />
  </div>

 <map name="ImageMap3" id="map3" >
  <area shape="rect" alt="" coords="6,138,73,199"   />
  <area shape="rect" alt="" coords="85,80,173,129" />
  <area shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" />
 </map>

<script type="text/javascript">
/*<![CDATA[*/
// note shape cicle is not allowed

function zxcMapHilight(o){
 var obj=document.getElementById(o.ImageParentID),map=document.getElementById(o.ImageMapID),areas=map.getElementsByTagName('AREA'),ary=o.ImageArray,coords,lft,top,w,h,img,z0=0,z0a;
 for (;z0<areas.length;z0++){
  lft=10000;
  top=10000;
  w=0;
  h=0;
  coords=areas[z0].coords.split(',');
  for (z0a=0;z0a<coords.length;z0a+=2){
   lft=Math.min(lft,coords[z0a]);
   top=Math.min(top,coords[z0a+1]);
   w=Math.max(w,coords[z0a]);
   h=Math.max(h,coords[z0a+1]);
  }
  if (ary&&ary[z0]&&coords.length%2==0){
   img=document.createElement('IMG');
   img.src=ary[z0];
   img.style.position='absolute';
   img.style.visibility='hidden';
   img.style.zIndex='1';
   img.style.left=lft+'px';
   img.style.top=top+'px';
   img.style.width=w-lft+'px';
   img.style.height=h-top+'px';
   obj.appendChild(img);
   this.addevt(areas[z0],'mouseover','show',img);
   this.addevt(areas[z0],'mouseout','show',img);
  }
 }

}

zxcMapHilight.prototype={

 show:function(e,img){
  img.style.visibility=e.type=='mouseout'?'hidden':'visible';
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}


new zxcMapHilight({
  ImageParentID:'tst3',
  ImageMapID:'map3',
  ImageArray:[
   'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
   'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
   'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
   'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
  ]
});
/*]]>*/
</script>
</body>

</html>

Thread: Image map onmouseover help

Thread Tools

Display

Image map onmouseover help

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions