www.webdeveloper.com
Results 1 to 6 of 6

Thread: Clickable image map - any ideas ?

  1. #1
    Join Date
    Feb 2009
    Posts
    3

    Clickable image map - any ideas ?

    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.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2009
    Posts
    3

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

    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Feb 2009
    Posts
    3

    Thank you

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

    Tim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles