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,709
    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,709
    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,709
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.36458 seconds
  • Memory Usage 2,905KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates