SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot bensheard's Avatar
    Join Date
    Jun 2006
    Location
    Cape Town | South Africa
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing viz of layers using onmousein/out

    Hi
    I have got the following code working almost perfect, except the one part I cant get right is that the layer disappears as soon as the mouse leaves the first cell in each of the layers instead of the table like I would want it. Try copying it into front page or something and see. Is there a way to fix it or a better way to do it? Thanks
    Code:
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="17">
      <tr>
        <td width="20%" onmouseover="show(1)" height="17">Heading 1</td>
        <td width="20%" onmouseover="show(2)" height="17">Heading 2</td>
        <td width="20%" onmouseover="show(3)" height="17">Heading 3</td>
        <td width="20%" onmouseover="show(4)" height="17">Heading 4</td>
        <td width="20%" onmouseover="show(5)" height="17">Heading 5</td>
      </tr>
    </table>
    <div id = 'layer1' style = ' position:absolute; top:37; left:9; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(1)">
        <tr>
          <td width="100%">Option 1</td>
        </tr>
        <tr>
          <td width="100%">Option 2</td>
        </tr>
        <tr>
          <td width="100%">Option 3</td>
        </tr>
        </table>
    </div>
    <div id = 'layer2' style = ' position:absolute; top:37; left:196; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(2)">
        <tr>
          <td width="100%">Option 1</td>
        </tr>
        <tr>
          <td width="100%">Option 2</td>
        </tr>
        <tr>
          <td width="100%">Option 3</td>
        </tr>
        </table>
    </div>
    <div id = 'layer3' style = ' position:absolute; top:37; left:383; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(3)">
        <tr>
          <td width="100%">Option 1</td>
        </tr>
        <tr>
          <td width="100%">Option 2</td>
        </tr>
        <tr>
          <td width="100%">Option 3</td>
        </tr>
        </table>
    </div>
    <div id = 'layer4' style = ' position:absolute; top:37; left:570; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(4)">
        <tr>
          <td width="100%">Option 1</td>
        </tr>
        <tr>
          <td width="100%">Option 2</td>
        </tr>
        <tr>
          <td width="100%">Option 3</td>
        </tr>
        </table>
    </div>
    <div id = 'layer5' style = ' position:absolute; top:37; left:757; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(5)">
        <tr>
          <td width="100%">Option 1</td>
        </tr>
        <tr>
          <td width="100%">Option 2</td>
        </tr>
        <tr>
          <td width="100%">Option 3</td>
        </tr>
        </table>
    </div>
    
    <script type = "text/javascript">
    <!--
    function hide(id){
        var hello = "layer" + id;
        var name = document.getElementById(hello)
    	name.style.visibility = "hidden";
    	}
    function show(id){
        var hello = "layer" + id;
        var name = document.getElementById(hello)
    	name.style.visibility = "visible";
    	}
    
    	//-->
    </script>
    thanks
    Ben Sheard
    -------------
    Log all your dives easily and quickly from anywhere in the world
    www.divinglogs.cafe150.com

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also add an event handler for mouseover on the div.

    ex:
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseover="show(5)" onmouseout="hide(5)">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •