image visibility: make different images show up in the some place

[Cadwalader]

I am really stuck...

I have made a little progress, but how can I get the images to show up in the same exact place?

Here is what I have so far...


<table valign=&quot;center&quot; width=&quot;700px&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;1&quot; bordercolor=&quot;red&quot;>
<tr>



<td width=&quot;100&quot; onMouseOver=&quot;id0.style.visibility='';&quot; onMouseOut=&quot;id0.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/hometab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id1.style.visibility='';&quot; onMouseOut=&quot;id1.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/aboutustab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id2.style.visibility='';&quot; onMouseOut=&quot;id2.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/alftab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id3.style.visibility='';&quot; onMouseOut=&quot;id3.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/womentab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id4.style.visibility='';&quot; onMouseOut=&quot;id4.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/mentab.gif&quot;></td>
</TR>
<TR width=&quot;700&quot; height=&quot;29&quot; style=&quot;z-index:2;>
<td colspan=&quot;5&quot;><div border=&quot;1&quot; id=&quot;id0&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><img src=&quot;images/bar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id1&quot; onMouseOver=&quot;this.style.visibility='';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><img src=&quot;images/aboutusbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id2&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><img src=&quot;images/alfbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id3&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><img src=&quot;images/mensbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id4&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><img src=&quot;images/womenbar.gif&quot;></div>
</TR>


</table>


My trouble is that the src=&quot;images/*.gif&quot; are like &quot;stacked&quot; and I need them all to be on top of each other. How can I do that? Hope I was of some help...
--OR--
Thanks for the help...
--Rich

 

[RISTMO]

Do you mean the same place vertically?

Rick

 

[RISTMO]

Try using &quot;position&quot;. Something like this. Play with it and you should figure it out.


<table valign=&quot;center&quot; width=&quot;700px&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;1&quot; bordercolor=&quot;red&quot;>
<tr>
<td width=&quot;100&quot; onMouseOver=&quot;id0.style.visibility='';&quot; onMouseOut=&quot;id0.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/hometab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id1.style.visibility='';&quot; onMouseOut=&quot;id1.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/aboutustab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id2.style.visibility='';&quot; onMouseOut=&quot;id2.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/alftab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id3.style.visibility='';&quot; onMouseOut=&quot;id3.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/womentab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;id4.style.visibility='';&quot; onMouseOut=&quot;id4.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/mentab.gif&quot;></td>
</TR>
<TR width=&quot;700&quot; height=&quot;29&quot; style=&quot;z-index:2;&quot;>
<td colspan=&quot;5&quot;>
&nbsp;
<div border=&quot;1&quot; id=&quot;id0&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;position:absolute;top:50;&quot; align=&quot;center&quot;><img src=&quot;images/bar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id1&quot; onMouseOver=&quot;this.style.visibility='';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;position:absolute;top:50;&quot; align=&quot;center&quot;><img src=&quot;images/aboutusbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id2&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;position:absolute;top:50;&quot; align=&quot;center&quot;><img src=&quot;images/alfbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id3&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;position:absolute;top:50;&quot; align=&quot;center&quot;><img src=&quot;images/mensbar.gif&quot;></div>
<div border=&quot;1&quot; id=&quot;id4&quot; onMouseOver=&quot;this.style.visibility='visible';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;position:absolute;top:50;&quot; align=&quot;center&quot;><img src=&quot;images/womenbar.gif&quot;></div>
</td>
</TR>
</table>

Rick

 

[Cadwalader]

RISTMO,

Thanks. I just did that and it's working great. Thanks to IE6, I have to redo about 7 sites that are using a js that does that. IE6, by default, hits the server each time an image is called (that's with the js). But with DHTML, I WIN!!!! hahahaha

I may seem happy--because I am. The boss said if I couldn't fix it, he would &quot;...hire a web design company to take care of this stuff from now on.&quot; That means I'd no longer have a job. I'll stop rambling now...thanks for the input, RISTMO, that's exactly what I wound up doing...;-) Hope I was of some help...
--OR--
Thanks for the help...
--Rich