Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 490
  • Last Modified:

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
0
Quarfelburg
Asked:
Quarfelburg
  • 14
  • 9
1 Solution
 
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
 
jaysolomonCommented:
also what browsers do you want to support?

NS4 <- 1% of user use it

IE5+  ------
                   } Modern Browsers
NS6+ ------
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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:
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:
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 14
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now