Image Map Mouseover with description

**crood58** · 08-04-2009, 08:47 PM

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

**vwphillips** · 08-05-2009, 09:18 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[*/
#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>

**crood58** · 08-05-2009, 12:23 PM

Originally Posted by vwphillips

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

**zork48** · 10-16-2010, 12:52 PM

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

)
Thanks
zork

**vwphillips** · 10-16-2010, 02:09 PM

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>

Thread: Image Map Mouseover with description

Thread Tools

Search Thread

Image Map Mouseover with description

Bookmarks

Bookmarks

Posting Permissions