Log in

View Full Version : 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
<!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
<!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 ??.. :o)
Thanks
zork
vwphillips
10-16-2010, 02:09 PM
<!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>