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

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
jaysolomonCommented:
also what browsers do you want to support?

NS4 <- 1% of user use it

IE5+  ------
                   } Modern Browsers
NS6+ ------
0
 
QuarfelburgAuthor Commented:
I don't care about NS4 or Opera.


0
 
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>
0
 
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
0
 
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.

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

0
 
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.

0
 
jaysolomonCommented:
hmmm the flickering

let me play with it a few

I think it will have to do with using the map is why.
0
 
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>
0
 
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.
0
 
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
0
 
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
0
 
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
0
 
QuarfelburgAuthor Commented:
Thanks so much Jay, it works beautifully.


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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.