onmouseover show/hide layers bordering

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
QuarfelburgAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jaysolomonCommented:
where do you want the rollover to show and hide?
QuarfelburgAuthor Commented:
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?

jaysolomonCommented:
also what browsers do you want to support?

NS4 <- 1% of user use it

IE5+  ------
                   } Modern Browsers
NS6+ ------
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

QuarfelburgAuthor Commented:
I don't care about NS4 or Opera.


jaysolomonCommented:
<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>
jaysolomonCommented:
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
QuarfelburgAuthor Commented:
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.

jaysolomonCommented:
ok then brb with the results maybe
jaysolomonCommented:
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>
QuarfelburgAuthor Commented:
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.

QuarfelburgAuthor Commented:
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.

jaysolomonCommented:
hmmm the flickering

let me play with it a few

I think it will have to do with using the map is why.
jaysolomonCommented:
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>
QuarfelburgAuthor Commented:
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.
jaysolomonCommented:
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
jaysolomonCommented:
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
jaysolomonCommented:
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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jaysolomonCommented:
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
QuarfelburgAuthor Commented:
Thanks so much Jay, it works beautifully.


jaysolomonCommented:
Glad we could help and thanks for the A
QuarfelburgAuthor Commented:
I've another question related to this thread, should I ask it here?
jaysolomonCommented:
sure\
QuarfelburgAuthor Commented:
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?

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.