DHTML Menu Editing
 

I made this little DHTML menu with a menu builder tool I have and I was wondering how to change something. Go ahead and take a look at the menu here: www.team696.org I want the menu to be the dark gray color (like when you mouseover) all the time in the cell for the page you are on. Like if you are on the Contact page, I want only the Contact cell in the menu to be dark gray and the rest to be light gray. Could someone please view my source code and tell me what to change? I have the same code for the menu on all the pages of the site. Thanks.

add this to around line 60-65:

and around line 520 - 526 (after adding the previous stuff):

hope this helps; this menu thing looks quite complicated and such...

Wow, thanks for the quick help. I got it working http://team696.org/menutest.html Now, I just need one more thing, for the text to be white in that dark gray cell. Any help?

sure; around line 520-527 (in your new modified example):

good luck

I just got it by myself actually by just tinkering around a bit before I saw your post. I did the exact same thing you just did. Thanks for your help.:)

I have a similar question. If you are making a menu, like the one on that website, how would you make the hover, color change effect? It looks like you could use the onMouseOver event, but how would you get it to change back after the mouse leaves it? Is there an event that is the opposite of onMouseOver? If not, then how do you do it?

yes, the opposite of onmouseover is onmouseout, its used just like onmouseover is

There are a lot of online tutorials regarding this aspect of Javascript, especially in the area of DHTML menus. I personally try not to use the things (it's all about pure CSS menus, which are structured way better and make up for just about all of JS's shortcomings), but I've read some pretty informative and interesting stuff about JS and they include extensive coverage of event handlers like onMouseOut. I'd recommend reading some of that if you're into Javascript.

http://www.robocards.org/design/2/ uses overlib (I'm not sure of the address, it's in the source though). It's pretty simple to use in my opinion...it uses onmouseover & onmouseout. It's complete javascript though. [Edit: This is not the offical site btw, just a design I'm working on]

Just FYI, that robocards link above has a picture that takes forever to load. Maybe it's because it's 3520x2400 :eek: :D

Heh, yea...I've got a more-resonable sized image on my comp I keep forgetting to upload /notes to do that tomorrow since I'm gettin off the comp. soon

Thanks for all that information, but I think I can figure out how to use onMouseOut. Just one quick question to avoid going through all the tutorials, Does the onMouseOver and onMouseOut have to go on every td tag in the table?

Unless you want it to stay that color when you move the mouse over it, yes...Also, it's a good idea to add a "return false;" [w/o the quotes] after whatever you do in both (it's either return false or return true).

I thought that return flase only applies to onClicks used with hyperlniks, so that it doesn't jump back to the top of the page.

I'm not sure on that, you are probably right though {I'm not good w/ JavaScript'in and such, just design}.

I keep trying to get the menu to work but it isn't changing colors when I hover over it. I will try to post the code for someone to check and let me know whats wrong...

This is on the page:

<!-- toc -->
<script language="JavaScript">
<!--
function hover(name,direction)
{
if (direction == "on") { name.bgColor = "#000080"; }
else { name.bgColor = "#bbbbbb"; }
}
function jump(url)
{
location.replace(url);
}
// -->
</script>
<span style="font-size: 20"><center>Articles</center></span>
<table border="0" width="100%"><tbody>
<tr><td class="toc" name="a" onMouseOver="hover('a','on');"
onMouseOut="hover('a','off');" onClick="jump('latest%20news/list.html');">latest news</td></tr>
</tbody></table>
<!-- /toc -->

and this is in the stylesheet:

td {font-size: 18}
.toc {background-color: #bbbbbb; text-transform: uppercase; text-align: center}

u are passing "a" to the hover function and you are trying to change "a"'s properties; the problem is that u are not referring to a's right; you would have to do a "lookup by name" of the thing you are passing to hover or even easier; pass "this" instead

and

(this is replacing your hover calls from the thing u pasted)

good luck...

I keep trying it using "this", without the quotes, and it still isn't working.

New code:

<td class="toc" name="a" onMouseOver="hover(this,'on');"
onMouseOut="hover(this,'off');" onClick="jump('latest%20news/list.html');">latest news</td>

The onClick works fine so I'm not worried about that. It just won't change colors when I hover over it. There are no error messages though.

AH HAH!!! I just found the problem. It wasn't changing because the "class" attribute was set for "toc" (table of contents) Once I took that part out, it started working.