SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation how to do layer positioning within a table

    Here's one for the gurus...

    I need to do a hide/show layer javascript link on an image map in one cell of a table. In the other cell, I want to have all (7) layers. They need to be positioned in the same spot so when one becomes visible on a mouseover, the others will appear in the same place.

    I can't do absolute positioning as the position of the table will change depending on resolution and browsers. I can't seem to do relative positioning and still get layers positioned in the same place...

    How would I do this?

    Actually, the layer will contain text and, perhaps a colored background, so could this whole thing be cirumvented by doing some kind of javascript write to cell on the mouseover?

    Sketch
    Aaron Brazell
    Technosailor



  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using display instead. With visibility it is taking up physical area while using display removes the physical area. (If I understand what you are asking anyways)...

    so instead of
    visibility:'hidden'

    would be

    display: 'none'

    and
    visibility:'visible'

    would be
    display: ''

    Hope that helps. (BTw that is two single quotes) I use this technique over the visibility one.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so:
    Code:
    <div id="layer" style="position: relative left; display: none;">
    And on mousover, change the style.display = ''; ?

    Is that right?

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wrote up a little demo to show you.

    Code:
    <table>
    <tr>
    	<td onmouseover="document.getElementById('bob').style.display=''" onmouseout="document.getElementById('bob').style.display='none'">test column1</td>
    	<td onmouseover="document.getElementById('bob2').style.display=''" onmouseout="document.getElementById('bob2').style.display='none'">test column2</td>
    </tr>
    <tr>
    	<td colspand="2"><div style="position:relative; display:'none'" id="bob">test show 1</div>
    	<div style="position:relative; display:'none'" id="bob2">test 2</div>
    	</td>
    	
    </tr>
    </table>
    And if you are concerned about backwards compatibilty I at least know this technique works on IE5. By chance I am using a laptop with an old version on IE ...Hope that helps sketch.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


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
  •