Solved

onmouseover show/hide layers bordering

Posted on 2003-10-28
23
479 Views
Last Modified: 2008-02-01
I am trying to make the equivalent of an onmouseover image map.  I have a photo of a room, and I want a border to go around parts of the image onmouseover.   I am going to try and do this with show/hide layers.   I don't know much Javascript but I do have some example code that I can play around with.  I've tried this out - but it doesn't work, so sad =(  Could someone perhaps tell me the error in my ways?

http://www.greenteadesign.com/test/roomsborder/stereosteproom.html

Thanks in advance,
Hayden
0
Comment
Question by:Quarfelburg
  • 14
  • 9
23 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9634981
where do you want the rollover to show and hide?
0
 

Author Comment

by:Quarfelburg
ID: 9635004
Over the picture, outlining each major piece.  

So the Stereo Step would be:

<div id="item" style="position:absolute; left:14px; top:126px; width:156px; height:167px; z-index:1; visibility:hidden">

Right?

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635008
also what browsers do you want to support?

NS4 <- 1% of user use it

IE5+  ------
                   } Modern Browsers
NS6+ ------
0
 

Author Comment

by:Quarfelburg
ID: 9635065
I don't care about NS4 or Opera.


0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635176
<html>
<head>

<title>
Test
</title>
<script language="JavaScript">
<!--
function toggle(theDiv){
      var elem = document.getElementById(theDiv);
      elem.style.display = (elem.style.display == "none")? "" : "none";
}

//-->
</script></head>
<body>


<table width="500" border="1" cellpadding="0" cellspacing="0">
<!--STEREOSTEP-->

      <td valign="top" align="left" width="393"><img src="http://www.greenteadesign.com/test/roomsborder/stereosteproom.jpg" width=393 height=351 alt="Room 1" border=0></td>
      <td width="107" nowrap><a href="stereostep.html" onMouseOut="toggle('item1')" onmouseover="toggle('item1')">Item1</a><br />
      <a href="5footmaru.html" onMouseOut="toggle('item2')" onmouseover="toggle('item2')">Item 2</a><br />
         <a href="horseshoechair.html" onMouseOut="toggle('item3')" onmouseover="toggle('item3')">Item 3</a><br />
    <a href="characterlamps.html" onMouseOut="toggle('item4')" onmouseover="toggle('item4')">Item 4</a></td>      

      <div id="item1" style="position:absolute; left:14px; top:126px; width:156px; height:167px; z-index:1; display: none;">
      <table border="1" cellpadding="0" cellspacing="0" width="156" height="167">
            <tr>
                  <td width="50%" height="50%" valign="top" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="top" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
            
            <tr>
                  <td width="50%" height="50%" valign="bottom" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="bottom" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      </table>
      </div>
<!--MARU TABLE-->      
      
      <div id="item2" style="position:absolute; left:96px; top:195px; width:243px; height:156px; z-index:2;display: none;">
      <table border="0" cellpadding="0" cellspacing="0" width="243" height="156">
            <tr>
                  <td width="50%" height="50%" valign="top" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="top" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      
            <tr>
                  <td width="50%" height="50%" valign="bottom" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="bottom" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      </table>
      </div>
<!--HORSE SHOE CHAIR-->      
      
      <div id="item3" style="position:absolute; left:158px; top:169px; width:96px; height:142px; z-index:3;display: none;">
      <table border="0" cellpadding="0" cellspacing="0" width="96" height="142">
            <tr>
                  <td width="50%" height="50%" valign="top" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="top" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
            
            <tr>
                  <td width="50%" height="50%" valign="bottom" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="bottom" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      </table>
      </div>
      <!-- CHARACTER LAMP-->
            
      <div id="item4" style="position:absolute; left:240px; top:142px; width:35px; height:48px; z-index:4;display: none;">
      <table border="0" cellpadding="0" cellspacing="0" width="35" height="48">
            <tr>
                  <td width="50%" height="50%" valign="top" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="top" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
            
            <tr>
                  <td width="50%" height="50%" valign="bottom" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="bottom" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      </table>
      </div>
      <!-- FENG SHUI COMPASSES-->
            
      <div id="item4" style="position:absolute; left:316px; top:133px; width:55px; height:62px; z-index:4;display: none;">
      <table border="0" cellpadding="0" cellspacing="0" width="55" height="62">
            <tr>
                  <td width="50%" height="50%" valign="top" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="top" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
            
            <tr>
                  <td width="50%" height="50%" valign="bottom" align="left">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                  </td>
                  
                  <td width="50%" height="50%" valign="bottom" align="right">
                        <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                  </td>
            </tr>
      </table>
      </div>
</table>
</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635183
You was trying to show item4 twice, i delted that. Add it back if you need it.

You need to add the brackets for the Item1
0
 

Author Comment

by:Quarfelburg
ID: 9635332
Jay, thanks that is very useful.  However, I want the mouseover to be over the image itself.  If I move the mouse over the stereostep I want the border to apply.  Likewise if I move the mouse over item1 the border should also be applied.

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635363
ok then brb with the results maybe
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635728
Ok does this do it for ya? you will have to play with your <div> position to shift the brackets over a lil


<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function toggle(theDiv){
     var elem = document.getElementById(theDiv);
     elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="42%"><img src="http://www.greenteadesign.com/test/roomsborder/stereosteproom.jpg" width="393" height="351" usemap="#Map" border="0">
      <map name="Map">
        <!-- Table -->
        <area shape="poly" coords="91,221,267,199,349,219,135,259" href="#" onMouseOver="toggle('item2')" onMouseOut="toggle('item2')">
        <!-- /Table -->
        <!-- Lamp -->
        <area shape="rect" coords="243,141,272,189" href="#" onMouseOver="toggle('item4')" onMouseOut="toggle('item4')">
        <!-- /Lamp -->
        <!-- Chair -->
        <area shape="rect" coords="170,172,254,298" href="#" onMouseOver="toggle('item3')" onMouseOut="toggle('item3')">
        <!-- /Chair -->
        <!-- Stepper -->
        <area shape="poly" coords="147,117" href="#">
        <area shape="poly" coords="165,127" href="#">
        <area shape="poly" coords="166,127,125,127,15,244,28,280,93,273,99,224,164,202" href="#" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')">
        <!-- /Stepper -->
        <!-- Compass -->
        <area shape="rect" coords="321,137,364,179" href="#" onMouseOver="toggle('item5')" onMouseOut="toggle('item5')">
        <!-- /Compass -->
      </map>
      <div id="item1" style="position:absolute; left:19px; top:126px; width:165px; height:167px; z-index:1; display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="156" height="167">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <div id="item2" style="position:absolute; left:96px; top:195px; width:243px; height:156px; z-index:2;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="243" height="156">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!--HORSE SHOE CHAIR-->
      <div id="item3" style="position:absolute; left:158px; top:169px; width:96px; height:142px; z-index:3;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="96" height="142">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- CHARACTER LAMP-->
      <div id="item4" style="position:absolute; left:240px; top:142px; width:35px; height:48px; z-index:4;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="35" height="48">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- FENG SHUI COMPASSES-->
    </td>
    <td width="58%"><a href="stereostep.html" onMouseOut="toggle('item1')" onMouseOver="toggle('item1')">Item1</a><br />
      <a href="5footmaru.html" onMouseOut="toggle('item2')" onMouseOver="toggle('item2')">Item
      2</a><br />
      <a href="horseshoechair.html" onMouseOut="toggle('item3')" onMouseOver="toggle('item3')">Item
      3</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item4')" onMouseOver="toggle('item4')">Item
      4</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item5')" onMouseOver="toggle('item5')">Item
      5</a></td>
  </tr>
</table>
<div id="item5" style="position:absolute; left:316px; top:133px; width:55px; height:62px; z-index:4;display: none;">
     <table border="0" cellpadding="0" cellspacing="0" width="55" height="62">
          <tr>
               <td width="50%" height="50%" valign="top" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="top" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
         
          <tr>
               <td width="50%" height="50%" valign="bottom" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="bottom" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
     </table>
     </div>

</body>
</html>
0
 

Author Comment

by:Quarfelburg
ID: 9635770
It looks great, is there any way to fix the flickering?  If at all possible I would like the border to be as solid as the ones on the side.

I don't know how to thank you enough Jay, so I'll just increase the points.

0
 

Author Comment

by:Quarfelburg
ID: 9635793
Check out:

 http://ww2.potterybarn.com//cat/roomindex.cfm?cid=romlivcab&cmsrc=&src=rmscromliv%7Crrooms%2Frmscrom%7Crrooms%2Fhme

I remember you answering a question relating to this a couple months back.  Their version doesn't seem to use image maps.

0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635800
hmmm the flickering

let me play with it a few

I think it will have to do with using the map is why.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635854
Try this it slowed the flickering down

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function toggle(theDiv){
     var elem = document.getElementById(theDiv);
     elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="42%"><img src="http://www.greenteadesign.com/test/roomsborder/stereosteproom.jpg" width="393" height="351" usemap="#Map" border="0">
      <map name="Map">
        <!-- Table -->
        <area shape="poly" coords="91,221,267,199,349,219,135,259" href="#" onMouseOver="setTimeout('toggle(\'item2\')',100)" onMouseOut="setTimeout('toggle(\'item2\')',200)">
        <!-- /Table -->
        <!-- Lamp -->
        <area shape="rect" coords="243,141,272,189" href="#" onMouseOver="setTimeout('toggle(\'item4\')',100)" onMouseOut="setTimeout('toggle(\'item4\')',200)">
        <!-- /Lamp -->
        <!-- Chair -->
        <area shape="rect" coords="170,172,254,298" href="#" onMouseOver="setTimeout('toggle(\'item3\')',100)" onMouseOut="setTimeout('toggle(\'item3\')',200)">
        <!-- /Chair -->
        <!-- Stepper -->
        <area shape="poly" coords="147,117" href="#">
        <area shape="poly" coords="165,127" href="#">
        <area shape="poly" coords="166,127,125,127,15,244,28,280,93,273,99,224,164,202" href="#" onMouseOver="setTimeout('toggle(\'item1\')',100)" onMouseOut="setTimeout('toggle(\'item1\')',200)">
        <!-- /Stepper -->
        <!-- Compass -->
        <area shape="rect" coords="321,137,364,179" href="#" onMouseOver="setTimeout('toggle(\'item5\')',100)" onMouseOut="setTimeout('toggle(\'item5\')',200)">
        <!-- /Compass -->
      </map>
      <div id="item1" style="position:absolute; left:19px; top:126px; width:165px; height:167px; z-index:1; display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="156" height="167">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <div id="item2" style="position:absolute; left:96px; top:195px; width:243px; height:156px; z-index:2;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="243" height="156">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!--HORSE SHOE CHAIR-->
      <div id="item3" style="position:absolute; left:158px; top:169px; width:96px; height:142px; z-index:3;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="96" height="142">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- CHARACTER LAMP-->
      <div id="item4" style="position:absolute; left:240px; top:142px; width:35px; height:48px; z-index:4;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="35" height="48">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- FENG SHUI COMPASSES-->
    </td>
    <td width="58%"><a href="stereostep.html" onMouseOut="toggle('item1')" onMouseOver="toggle('item1')">Item1</a><br />
      <a href="5footmaru.html" onMouseOut="toggle('item2')" onMouseOver="toggle('item2')">Item
      2</a><br />
      <a href="horseshoechair.html" onMouseOut="toggle('item3')" onMouseOver="toggle('item3')">Item
      3</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item4')" onMouseOver="toggle('item4')">Item
      4</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item5')" onMouseOver="toggle('item5')">Item
      5</a></td>
  </tr>
</table>
<div id="item5" style="position:absolute; left:316px; top:133px; width:55px; height:62px; z-index:4;display: none;">
     <table border="0" cellpadding="0" cellspacing="0" width="55" height="62">
          <tr>
               <td width="50%" height="50%" valign="top" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="top" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
         
          <tr>
               <td width="50%" height="50%" valign="bottom" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="bottom" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
     </table>
     </div>

</body>
</html>
0
 

Author Comment

by:Quarfelburg
ID: 9635896
It's slowed down but if the user moves their mouse slightly the border disappears.  Is this the fault of using an image map, or the toggle function?

 Could this effect also be done with hidden layers with onmouseovers over the image, instead of an image map?  Sorry I am not very knowledgable in this area.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635899
Looks like they are using hidden DIV tags and not a MAP

we could do that but you should try the last solution

I used setTimeout
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635912
No don't be sorry thats what we are here for.

EE is kinda like Radio Shack "You Got Questions We Got solutions"


Yes you can use hidden div let me see what i can do
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 500 total points
ID: 9636081
Ok here ya go. You will need to create a TRANSPARENT spacer.gif to make it work. I have one if you need it i can email it to ya

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function toggle(theDiv){
     var elem = document.getElementById(theDiv);
     elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
</head>
<body>
<div id="Table" style="position:absolute; width:259px; height:77px; z-index:5; left: 96px; top: 229px" onMouseOver="toggle('item2')" onMouseOut="toggle('item2')"><a href="#"><img src="spacer.gif" width="245" height="77" border="0"></a></div>
<div id="Lamp" style="position:absolute; width:57px; height:63px; z-index:6; left: 239px; top: 163px" onMouseOver="toggle('item4')" onMouseOut="toggle('item4')"><a href="#"><img src="spacer.gif" width=57" height="63" border="0"></a>></div>
<div id="Compass" style="position:absolute; width:64px; height:57px; z-index:7; left: 323px; top: 165px" onMouseOver="toggle('item5')" onMouseOut="toggle('item5')"><a href="#"><img src="spacer.gif" width="64" height="57" border="0"></a>></div>
<div id="Chair" style="position:absolute; width:89px; height:137px; z-index:8; left: 177px; top: 203px" onMouseOver="toggle('item3')" onMouseOut="toggle('item3')"><a href="#"><img src="spacer.gif" width="89" height="137" border="0"></a>></div>
<div id="Stepper" style="position:absolute; width:142px; height:88px; z-index:9; left: 14px; top: 152px" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')"><a href="#"><img src="spacer.gif" width="140" height="88" border="0"></a>></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="42%"><img src="http://www.greenteadesign.com/test/roomsborder/stereosteproom.jpg" width="393" height="351" border="0">
      <div id="item1" style="position:absolute; left:19px; top:126px; width:165px; height:167px; z-index:1; display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="156" height="167">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <div id="item2" style="position:absolute; left:96px; top:195px; width:243px; height:156px; z-index:2;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="243" height="156">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!--HORSE SHOE CHAIR-->
      <div id="item3" style="position:absolute; left:158px; top:169px; width:96px; height:142px; z-index:3;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="96" height="142">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- CHARACTER LAMP-->
      <div id="item4" style="position:absolute; left:240px; top:142px; width:35px; height:48px; z-index:4;display: none;">
        <table border="0" cellpadding="0" cellspacing="0" width="35" height="48">
          <tr>
            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
          <tr>
            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
            </td>
            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
            </td>
          </tr>
        </table>
      </div>
      <!-- FENG SHUI COMPASSES-->
    </td>
    <td width="58%"><a href="stereostep.html" onMouseOut="toggle('item1')" onMouseOver="toggle('item1')">Item1</a><br />
      <a href="5footmaru.html" onMouseOut="toggle('item2')" onMouseOver="toggle('item2')">Item
      2</a><br />
      <a href="horseshoechair.html" onMouseOut="toggle('item3')" onMouseOver="toggle('item3')">Item
      3</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item4')" onMouseOver="toggle('item4')">Item
      4</a><br />
      <a href="characterlamps.html" onMouseOut="toggle('item5')" onMouseOver="toggle('item5')">Item
      5</a></td>
  </tr>
</table>
<div id="item5" style="position:absolute; left:316px; top:133px; width:55px; height:62px; z-index:4;display: none;">
     <table border="0" cellpadding="0" cellspacing="0" width="55" height="62">
          <tr>
               <td width="50%" height="50%" valign="top" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="top" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
         
          <tr>
               <td width="50%" height="50%" valign="bottom" align="left">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
               </td>
               
               <td width="50%" height="50%" valign="bottom" align="right">
                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
               </td>
          </tr>
     </table>
     </div>

</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9636097
here is the spacer
http://jaysolomon.fateback.com/spacer.gif

copy the link to yur address bar then click go to get the image if you click thru EE on that link for the image then you will get a Server Error
0
 

Author Comment

by:Quarfelburg
ID: 9636379
Thanks so much Jay, it works beautifully.


0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9636553
Glad we could help and thanks for the A
0
 

Author Comment

by:Quarfelburg
ID: 9636611
I've another question related to this thread, should I ask it here?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9636683
sure\
0
 

Author Comment

by:Quarfelburg
ID: 9636724
When I transferred the code to a layout I made and redid the positioning, a resolution change mucks everything up.  This didn't happen in the test page that you created however.  Why is this?

The page is here:

http://www.greenteadesign.com/test.html

Note that I have only changed the positioning for item1 (Stereo Step).   When viewed on 1280x960 (resolution I am using) the border is placed correctly.  But switching to the popular 1024x768 or 800x600 and everything is out of whack.  How do I overcome the resolution problem?

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now