W3C home > Mailing lists > Public > www-dom@w3.org > January to March 2001

how can I position 2 images over top one another

From: Adam Webster <a.s.webster@seniram.com>
Date: Wed, 28 Feb 2001 10:53:55 -0500
To: <www-dom@w3.org>
Message-ID: <CAEGIMFEOGJHMCEDMNLMOEJHCCAA.a.s.webster@seniram.com>
I am trying to create a navigation bar.  It has several image maps, one for
folder tabs and 4 for the applicable links relating to the tabs.  I have an
imgmap for the tabs image that tells which link image (folder) to show based
on the tab.  The code will make the correct folder image visible, however;
they appear under each other and not on top in the same position.  Like this

TABS
FOLDER 1
FOLDER 2

Where I want
TABS
FOLDER 1

or
TABS
FOLDER 2

Here is the code:
Ex.

TABS Company, Samples, Downloads

Folders
    Company -> Contact Us, Directions
    Samples -> Binding, Printing
    Downloads -> PDF's, Whatever1, Whatever2

Here is the code I have:

 function changeFolder(folderOnElementName)
 {
  var dom;
  if (isNS4||isIE4||isNew)
  {
   dom = eval(docObj + '.realestate' + styleObj);
   var left = dom.left;
   var top = dom.top;
   dom.visibility = "hidden";
   dom = eval(docObj + '.charlottelife' + styleObj);
   dom.visibility = "hidden";
   dom = eval(docObj + '.' + folderOnElementName + styleObj);
   dom.left = left;
   dom.top = top;
   dom.visibility = "visible";
  }
 }


<tr>
  <td width="377" height="26"><img name="tabs" usemap="#img_map_tabs"
src="images/tabs/re_blue.gif" border="0" alt="" width="377"
height="26"></td>
</tr>
<!--- folders --->
<style type="text/css">
   .tablerow {position: relative;}
   #realestate {position: absolute;
           visibility: visible;
           z-index: 0;
   }
   #charlottelife {position: absolute;
           visibility: hidden;
           z-index: 1;
   }
</style>

<tr>
  <td width="600" height="26" colspan="2" valign="top" class="tablerow">
      <!--- THESE ARE THE IMAGES THAT SHOULD BE GETTING SWAPPED, WANT THEM
ON TOP OF EACH OTHER --->
     <span id="realestate"><a href=""><img name="re"
src="images/tabs/re_plain.gif" border="0" alt="" width="600"
height="26"></a></span>
    <span id="charlottelife"><a href=""><img name="cl"
src="images/tabs/cl_plain.gif" border="0" alt="" width="600"
height="26"></a></span>
  </td>
</tr>

Thanks for any help!
Adam
Received on Wednesday, 28 February 2001 10:59:46 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:13:48 GMT