Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onmouseover show/hide layers bordering

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

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

Thanks in advance,
Hayden
0
Comment
Question by:Quarfelburg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 9
23 Comments
 
LVL 16

Expert Comment

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

Author Comment

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

So the Stereo Step would be:

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

Right?

0
 
LVL 16

Expert Comment

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

NS4 <- 1% of user use it

IE5+  ------
                   } Modern Browsers
NS6+ ------
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

Author Comment

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


0
 
LVL 16

Expert Comment

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

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

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


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

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

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

Expert Comment

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

You need to add the brackets for the Item1
0
 

Author Comment

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

0
 
LVL 16

Expert Comment

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

Expert Comment

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


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

</body>
</html>
0
 

Author Comment

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

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

0
 

Author Comment

by:Quarfelburg
ID: 9635793
Check out:

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

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

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9635800
hmmm the flickering

let me play with it a few

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

Expert Comment

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

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

</body>
</html>
0
 

Author Comment

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

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

Expert Comment

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

we could do that but you should try the last solution

I used setTimeout
0
 
LVL 16

Expert Comment

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

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


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

Accepted Solution

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

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

</body>
</html>
0
 
LVL 16

Expert Comment

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

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

Author Comment

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


0
 
LVL 16

Expert Comment

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

Author Comment

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

Expert Comment

by:jaysolomon
ID: 9636683
sure\
0
 

Author Comment

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

The page is here:

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

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

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

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

Join & Ask a Question