Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

visibility, onMouseOver, onMouseOut, changing things in the same cell

Status
Not open for further replies.
Cadwalader

Cadwalader

IS-IT--Management
Feb 12, 2002
297
US
I am so lost, and I should know better...

I am trying to produce a navigation bar similar to the one at the top of this page, the "Forum, FAQ,..", BUT I need to be able to change the image in the table cell right below it. The tabs are 100px wide, and the cell below the tabs is 700px wide. The trouble I am having with the code below, is that the page gets really wide. I can't get the images that are supposed to be below the tabs to appear in the same cell.

Maybe if you see what I have so far, it will make more sense...


<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;id0.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;id0.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;id0.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;id0.style.visibility='hidden';&quot; id=&quot;lnk&quot; align=&quot;center&quot;><img src=&quot;images/mentab.gif&quot;></td>
</TR>
<TR style=&quot;z-index:2;position:absolute;&quot;>
<td colspan=&quot;5&quot; border=&quot;1&quot; id=&quot;id0&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/bar.gif&quot;></td>
<td 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;></td>
<td border=&quot;1&quot; id=&quot;id2&quot; onMouseOver=&quot;this.style.visibility='';&quot; onMouseOut=&quot;this.style.visibility='hidden';&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;><a href=&quot;images/alfbar.gif&quot;</a></td>
<td border=&quot;1&quot; id=&quot;id3&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/mensbar.gif&quot;></td>
<td border=&quot;1&quot; id=&quot;id4&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/womenbar.gif&quot;></td>
</TR>


</table>

The reason why I need to so it this way, is a long story. Let's just say I would use js for this, and I should, but IE is giving me trouble and I have to make this navbar work, or I might be out of a job...Please help.
...thanks. Hope I was of some help...
--OR--
Thanks for the help...
--Rich

 
Sort by date Sort by votes
Oops, the title of this question should have said &quot;different&quot; cell...doh! Hope I was of some help...
--OR--
Thanks for the help...
--Rich

 
Upvote 0 Downvote
Hi Rich,

Try this example:
(hope you'll keep your job)

<html>
<head>

<script language=javascript>
function ChangeImage(IDImage)
{
id0.style.visibility='visible';
eval(&quot;id0.background = 'images/&quot; + IDImage + &quot;'&quot;);
}

function kill()
{
id0.style.visibility='hidden'
}

</script>
</head>
<body>

<table valign=&quot;center&quot; width=&quot;500px&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;ChangeImage('homebar.gif')&quot; onMouseOut=&quot;kill()&quot; align=&quot;center&quot;><img src=&quot;images/hometab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;ChangeImage('aboutusbar.gif')&quot; onMouseOut=&quot;kill()&quot; align=&quot;center&quot;><img src=&quot;images/aboutustab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;ChangeImage('alfbar.gif')&quot; onMouseOut=&quot;kill()&quot; align=&quot;center&quot;><img src=&quot;images/alftab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;ChangeImage('womanbar.gif')&quot; onMouseOut=&quot;kill()&quot; align=&quot;center&quot;><img src=&quot;images/womentab.gif&quot;></td>
<td width=&quot;100&quot; onMouseOver=&quot;ChangeImage('menbar.gif')&quot; onMouseOut=&quot;kill()&quot; align=&quot;center&quot;><img src=&quot;images/mentab.gif&quot;></td>
</TR>
<TR style=&quot;z-index:2;position:absolute;&quot;>
<td colspan=&quot;5&quot; border=&quot;1&quot; id=&quot;id0&quot; style=&quot;visibility:hidden;&quot; align=&quot;center&quot;>&amp;nbsp;</td>
</TR>
</table>

</body>
</html>

Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
770
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
714
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top