Results 1 to 5 of 5

Thread: Image Map Mouseover with description

  1. #1
    Join Date
    Aug 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image Map Mouseover with description

    Hey Everyone!

    I am looking for something like this for my site,http://www.fdnysquad18.com/therig.php. Click on the compartments of the fire engine and you will see below it shows what is in the compartment to the right and to the left an overview picture of what is in that compartment. I would be using it for the exact same thing. I view sourced that page on the website and it is a javascript with an image map. Does anyone know where I can find something like this? I saw that dynamic drive has one on there site minus the picture to the left (or as they call it on the page detail). If someone could help me out I would greatly appreciate it.

    Thanks in advance!

    Chris

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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[*/
    #info {
      position:relative;width:200px;height:200px;border:solid black 1px;
    }
    
    .info {
      position:absolute;width:200px;height:200px;background-Color:#FFFFCC;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    function showInfo(id,nu){
     var obj=document.getElementById(id);
     var frames=zxcByClassName(id,obj);
     if (frames[nu]){
      if (obj.lst){
       obj.lst.style.zIndex=0;
      }
      obj.lst=frames[nu];
      obj.lst.style.zIndex=1;
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <img src="http://www.fdnysquad18.com/graphics/therig/therig.gif" name="interactiverig" width="529" height="101" border="0" usemap="#showcompartments" id="interactiverig">
    <div id="info" >
    <div class="info" >11</div>
    <div class="info" >10</div>
    <div class="info" >9</div>
    <div class="info" >8</div>
    <div class="info" >7</div>
    <div class="info" >6</div>
    <div class="info" >5</div>
    <div class="info" >4</div>
    <div class="info" >3</div>
    <div class="info" >2</div>
    <div class="info" >1</div>
    <div class="info" >0</div>
    </div>
    
    <map name="showcompartments">
      <area shape="poly" coords="12,27,34,27,28,86,3,87" href="#driverdoor" onMouseOver="showInfo('info',0)" >
      <area shape="poly" coords="79,26,104,26,105,84,78,85" href="#d_crewdoor" onMouseOver="showInfo('info',1)" >
      <area shape="poly" coords="114,31,158,29,157,83,113,84" href="#pumppanel" onMouseOver="showInfo('info',2)" >
      <area shape="poly" coords="195,29,161,30,161,80,195,78" href="#d_f_compartment" onMouseOver="showInfo('info',3)">
      <area shape="poly" coords="238,30,237,53,198,54,198,30" href="#d_m_compartment" onMouseOver="showInfo('info',4)">
      <area shape="poly" coords="241,30,260,29,260,79,240,80" href="#d_r_compartment" onMouseOver="showInfo('info',5)">
      <area shape="poly" coords="269,29,302,28,302,82,268,83" href="#o_r_compartment" onMouseOver="showInfo('info',6)">
      <area shape="poly" coords="306,28,351,28,350,55,304,57" href="#o_m_compartment" onMouseOver="showInfo('info',7)">
      <area shape="poly" coords="388,28,353,28,353,82,391,82" href="#o_f_compartment" onMouseOver="showInfo('info',8)">
      <area shape="poly" coords="394,30,433,29,437,77,396,78" href="#o_pumppanel" onMouseOver="showInfo('info',9)">
      <area shape="poly" coords="440,23,468,23,470,81,443,80" href="#o_crewdoor" onMouseOver="showInfo('info',10)">
      <area shape="poly" coords="505,24,527,21,528,81,514,79" href="#officerdoor" onMouseOver="showInfo('info',11)">
     </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
    Aug 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    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[*/
    #info {
      position:relative;width:200px;height:200px;border:solid black 1px;
    }
    
    .info {
      position:absolute;width:200px;height:200px;background-Color:#FFFFCC;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    function showInfo(id,nu){
     var obj=document.getElementById(id);
     var frames=zxcByClassName(id,obj);
     if (frames[nu]){
      if (obj.lst){
       obj.lst.style.zIndex=0;
      }
      obj.lst=frames[nu];
      obj.lst.style.zIndex=1;
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <img src="http://www.fdnysquad18.com/graphics/therig/therig.gif" name="interactiverig" width="529" height="101" border="0" usemap="#showcompartments" id="interactiverig">
    <div id="info" >
    <div class="info" >11</div>
    <div class="info" >10</div>
    <div class="info" >9</div>
    <div class="info" >8</div>
    <div class="info" >7</div>
    <div class="info" >6</div>
    <div class="info" >5</div>
    <div class="info" >4</div>
    <div class="info" >3</div>
    <div class="info" >2</div>
    <div class="info" >1</div>
    <div class="info" >0</div>
    </div>
    
    <map name="showcompartments">
      <area shape="poly" coords="12,27,34,27,28,86,3,87" href="#driverdoor" onMouseOver="showInfo('info',0)" >
      <area shape="poly" coords="79,26,104,26,105,84,78,85" href="#d_crewdoor" onMouseOver="showInfo('info',1)" >
      <area shape="poly" coords="114,31,158,29,157,83,113,84" href="#pumppanel" onMouseOver="showInfo('info',2)" >
      <area shape="poly" coords="195,29,161,30,161,80,195,78" href="#d_f_compartment" onMouseOver="showInfo('info',3)">
      <area shape="poly" coords="238,30,237,53,198,54,198,30" href="#d_m_compartment" onMouseOver="showInfo('info',4)">
      <area shape="poly" coords="241,30,260,29,260,79,240,80" href="#d_r_compartment" onMouseOver="showInfo('info',5)">
      <area shape="poly" coords="269,29,302,28,302,82,268,83" href="#o_r_compartment" onMouseOver="showInfo('info',6)">
      <area shape="poly" coords="306,28,351,28,350,55,304,57" href="#o_m_compartment" onMouseOver="showInfo('info',7)">
      <area shape="poly" coords="388,28,353,28,353,82,391,82" href="#o_f_compartment" onMouseOver="showInfo('info',8)">
      <area shape="poly" coords="394,30,433,29,437,77,396,78" href="#o_pumppanel" onMouseOver="showInfo('info',9)">
      <area shape="poly" coords="440,23,468,23,470,81,443,80" href="#o_crewdoor" onMouseOver="showInfo('info',10)">
      <area shape="poly" coords="505,24,527,21,528,81,514,79" href="#officerdoor" onMouseOver="showInfo('info',11)">
     </map>
    </body>
    
    </html>
    I am little confused with this script. Can you please explain a little bit please? Like what is the CDATA and are you using the div to display the content? Looked at the FDNY site and I kinda understand what they are doing.

    Chris

  4. #4
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ... many thanks to vwphillips, working perfectly..
    Any chance to hide the text on mouse over ??.. )
    Thanks
    zork

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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[*/
    #info {
      position:relative;width:200px;height:240px;border:solid black 1px;background-Color:#FFFFCC;
    }
    
    .info {
      position:relative;width:200px;height:20px;background-Color:#FFFFCC;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    function showInfo(id,nu){
     var obj=document.getElementById(id);
     var frames=zxcByClassName(id,obj);
     if (frames[nu]){
      if (obj.lst){
       obj.lst.style.visibility='visible';
      }
      obj.lst=frames[nu];
      obj.lst.style.visibility='hidden';
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <img src="http://www.fdnysquad18.com/graphics/therig/therig.gif" name="interactiverig" width="529" height="101" border="0" usemap="#showcompartments" id="interactiverig">
    <div id="info" >
    <div class="info" >11</div>
    <div class="info" >10</div>
    <div class="info" >9</div>
    <div class="info" >8</div>
    <div class="info" >7</div>
    <div class="info" >6</div>
    <div class="info" >5</div>
    <div class="info" >4</div>
    <div class="info" >3</div>
    <div class="info" >2</div>
    <div class="info" >1</div>
    <div class="info" >0</div>
    </div>
    
    <map name="showcompartments">
      <area shape="poly" coords="12,27,34,27,28,86,3,87" href="#driverdoor" onMouseOver="showInfo('info',0)" >
      <area shape="poly" coords="79,26,104,26,105,84,78,85" href="#d_crewdoor" onMouseOver="showInfo('info',1)" >
      <area shape="poly" coords="114,31,158,29,157,83,113,84" href="#pumppanel" onMouseOver="showInfo('info',2)" >
      <area shape="poly" coords="195,29,161,30,161,80,195,78" href="#d_f_compartment" onMouseOver="showInfo('info',3)">
      <area shape="poly" coords="238,30,237,53,198,54,198,30" href="#d_m_compartment" onMouseOver="showInfo('info',4)">
      <area shape="poly" coords="241,30,260,29,260,79,240,80" href="#d_r_compartment" onMouseOver="showInfo('info',5)">
      <area shape="poly" coords="269,29,302,28,302,82,268,83" href="#o_r_compartment" onMouseOver="showInfo('info',6)">
      <area shape="poly" coords="306,28,351,28,350,55,304,57" href="#o_m_compartment" onMouseOver="showInfo('info',7)">
      <area shape="poly" coords="388,28,353,28,353,82,391,82" href="#o_f_compartment" onMouseOver="showInfo('info',8)">
      <area shape="poly" coords="394,30,433,29,437,77,396,78" href="#o_pumppanel" onMouseOver="showInfo('info',9)">
      <area shape="poly" coords="440,23,468,23,470,81,443,80" href="#o_crewdoor" onMouseOver="showInfo('info',10)">
      <area shape="poly" coords="505,24,527,21,528,81,514,79" href="#officerdoor" onMouseOver="showInfo('info',11)">
     </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/

Bookmarks

Posting Permissions

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