Clickable image map - any ideas ?

**Polecat Harris** · 02-24-2009 07:04 AM

Hi,

I'm writing a little app that requires the user to click on various parts of an image map and to have those areas 'light up'. If you imagine a map of the world for example then I would like the user to be able to click on any (or multiple) countries and to see that they have selected them.

Is this sort of thing doable in javascript/DHTML.

Any ideas or pointers would be much appreciated !

Thanks,

Tim.

**vwphillips** · 02-24-2009 08:24 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:relative;width:351px;height:263px;border:solid black 1px;
}

.tst IMG {
 width:351px;height:263px;
}

.window {
  position:absolute;overflow:hidden;visibility:hidden;z-Index:2;border:solid red 1px;
}

.mask {
  position:absolute;visibility:hidden;z-Index:1;left:0px;top:0px;width:100%;height:100%;background-Color:#99FFFF;

/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcHiLight(id,area){
 var p=document.getElementById(id);
 var img=p.getElementsByTagName('IMG')[0];
 var divs=p.getElementsByTagName('DIV');
 if (!divs[0].img){
  divs[0].img=zxcES('IMG',{position:'absolute'},divs[0]);
  divs[0].img.src=img.src;
  divs[0].onmouseout=function(){ zxcES(this,{visibility:'hidden'}); if (this.msk) zxcES(this.msk,{visibility:'hidden'}); }
  if (divs[1]) divs[0].msk=divs[1];
 }
 var cords=area.coords.split(',');
 zxcES(divs[0],{visibility:'visible',left:cords[0]+'px',top:cords[1]+'px',width:cords[2]-cords[0]+'px',height:cords[3]-cords[1]+'px'});
 zxcES(divs[0].img,{left:-cords[0]+'px',top:-cords[1]+'px'});
 if (divs[0].msk) zxcES(divs[0].msk,{visibility:'visible'});
}

function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

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

<body>
<div id="tst" class="tst" >
<img border="0" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap" ismap="ISMAP" />
<div class="window" ></div>
<div class="mask" ></div>
</div>
<map name="PreviewImageMap">
<area shape=RECT alt="" coords="6,138,73,199"  onclick="zxcHiLight('tst',this);" />
<area shape=RECT alt="" coords="131,185,205,247"  onclick="zxcHiLight('tst',this);" />
<area shape=RECT alt="" coords="85,80,173,129"  onclick="zxcHiLight('tst',this);" />
<area shape=RECT alt="" coords="219,141,260,172"  onclick="zxcHiLight('tst',this);" />
</map>
<div id="tst1" class="tst" >
<img border="0" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap1" ismap="ISMAP" />
<div class="window" ></div>
</div>
<map name="PreviewImageMap1">
<area shape=RECT alt="" coords="6,138,73,199"  onclick="zxcHiLight('tst1',this);" />
<area shape=RECT alt="" coords="131,185,205,247"  onclick="zxcHiLight('tst1',this);" />
<area shape=RECT alt="" coords="85,80,173,129"  onclick="zxcHiLight('tst1',this);" />
<area shape=RECT alt="" coords="219,141,260,172"  onclick="zxcHiLight('tst1',this);" />
</map>

</body>

</html>

**Polecat Harris** · 02-25-2009 03:40 AM

Thanks very much for taking the time to reply ! Your code definitely helps get me going !

If I could impose once more - is it possible to put a transparent GIF over the top of the 'real' image and make that image use the image map - and then create other image elements beneath the transparent GIF.

That way I could select/deselect the images from one image map.

Thanks again,

Tim.

**vwphillips** · 02-25-2009 05:56 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:relative;width:351px;height:263px;border:solid black 1px;
}

.tst IMG {
 width:351px;height:263px;
}

.window {
  position:absolute;overflow:visible;visibility:hidden;z-Index:2;border:solid red 1px;
}

.window2 {
  position:absolute;overflow:visible;visibility:hidden;z-Index:2;border:solid #FFFF33 1px;
}

.mask {
  position:absolute;visibility:hidden;z-Index:1;left:0px;top:0px;width:100%;height:100%;background-Color:#99FFFF;

/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.mask2 {
  position:absolute;visibility:hidden;z-Index:1;left:0px;top:0px;width:100%;height:100%;background-Color:#FFFF33;

/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

function zxcSVInt(obj,par){
 if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}



function zxcMapHiLight(id){
 var evt=window.event||arguments.callee.caller.arguments[0];
 var area=window.event?evt.srcElement:evt.target;
 var p=document.getElementById(id);
 var img=p.getElementsByTagName('IMG')[0];
 var divs=p.getElementsByTagName('DIV');
 if (!divs[0].img){
  divs[0].img=zxcES('IMG',{position:'absolute'},divs[0]);
  divs[0].img.src=img.src;
  divs[0][evt.type=='mouseover'?'onmouseout':'onclick']=function(){ zxcES(this,{visibility:'hidden'}); if (this.msk) zxcES(this.msk,{visibility:'hidden'}); }
  if (divs[1]) divs[0].msk=divs[1];
 }
 var cords=area.coords.split(',');
 zxcES(divs[0],{visibility:'visible',overflow:'hidden',zIndex:'2',left:cords[0]+'px',top:cords[1]+'px',width:cords[2]-cords[0]+'px',height:cords[3]-cords[1]+'px'});
 zxcES(divs[0].img,{left:-cords[0]+'px',top:-cords[1]+'px'});
 if (divs[0].msk) zxcES(divs[0].msk,{visibility:'visible',zIndex:'1'});
}

function zxcMapHiLightInit(id,map,wcls,mskcls){
 var p=document.getElementById(id);
 p.mask=zxcES('DIV',{visibility:'hidden',zIndex:'1'},p);
 p.mask.className=mskcls||'';
 var img=p.getElementsByTagName('IMG')[0];
 var areas=document.getElementById(map).getElementsByTagName('AREA');
 p.ary=[];
 for (var cords,z0=0;z0<areas.length;z0++){
  cords=areas[z0].coords.split(',');
  p.ary[z0]=[zxcES('DIV',{visibility:'hidden',overflow:'hidden',zIndex:'2',left:cords[0]+'px',top:cords[1]+'px',width:cords[2]-cords[0]+'px',height:cords[3]-cords[1]+'px'},p),false];
  p.ary[z0][0].className=wcls;
  zxcES(img.cloneNode(false),{position:'absolute',left:-cords[0]+'px',top:-cords[1]+'px'},p.ary[z0][0]);
 }
}

function zxcMapAreaShow(id,nu){
 var p=document.getElementById(id);
 zxcES(p.mask,{visibility:'hidden'});
 if (p.ary){
  if (typeof(nu)=='number'&&p.ary[nu]){
   zxcES(p.ary[nu][0],{visibility:p.ary[nu][1]?'hidden':'visible'});
   p.ary[nu][1]=!p.ary[nu][1];
  }
  for (var z1=0;z1<p.ary.length;z1++){
   if (typeof(nu)=='boolean'){
    p.ary[z1][1]=nu;
    zxcES(p.ary[z1][0],{visibility:nu?'visible':'hidden'});
   }
   if (p.ary[z1][1]) zxcES(p.mask,{visibility:'visible'});
  }
 }
}

function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

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

<body onload="zxcMapHiLightInit('tst1','tst1map','window2','mask2');" >
<input type="button" name="" value="Area 0" onclick="zxcMapAreaShow('tst1',0);"/>
<input type="button" name="" value="Area 1" onclick="zxcMapAreaShow('tst1',1);"/>
<input type="button" name="" value="Area 2" onclick="zxcMapAreaShow('tst1',2);"/>
<input type="button" name="" value="Area 3" onclick="zxcMapAreaShow('tst1',3);"/>
<input type="button" name="" value="All" onclick="zxcMapAreaShow('tst1',true);"/>
<input type="button" name="" value="None" onclick="zxcMapAreaShow('tst1',false);"/>
<div id="tst1" class="tst" >
<img border="0" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap1" ismap="ISMAP" />
<div class="window" ></div>
</div>
<map name="PreviewImageMap1" id="tst1map">
<area shape=RECT alt="" coords="6,138,73,199"  onclick="zxcMapHiLight('tst1');" />
<area shape=RECT alt="" coords="131,185,205,247"  onclick="zxcMapHiLight('tst1');" />
<area shape=RECT alt="" coords="85,80,173,129"  onclick="zxcMapHiLight('tst1');" />
<area shape=RECT alt="" coords="219,141,260,172"  onclick="zxcMapHiLight('tst1');" />
</map>

<div id="tst" class="tst" >
<img border="0" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#PreviewImageMap" ismap="ISMAP" />
<div class="window" ></div>
<div class="mask" ></div>
</div>
<map name="PreviewImageMap">
<area shape=RECT alt="" coords="6,138,73,199"  onclick="zxcMapHiLight('tst');" />
<area shape=RECT alt="" coords="131,185,205,247"  onclick="zxcMapHiLight('tst');" />
<area shape=RECT alt="" coords="85,80,173,129"  onclick="zxcMapHiLight('tst');" />
<area shape=RECT alt="" coords="219,141,260,172"  onclick="zxcMapHiLight('tst');" />
</map>


</body>

</html>

**vwphillips** · 02-25-2009 08:32 AM

http://www.vicsjavascripts.org.uk/Im...pHighLight.htm

**Polecat Harris** · 02-25-2009 09:38 AM

Once again - thanks very much - just what I was looking for. I bow to your genius ;-)

Tim

Thread: Clickable image map - any ideas ?

Thread Tools

Display

Clickable image map - any ideas ?

Thanks for that - in true Columbo style - just one more thing ...

Thank you

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions