Floating Menu Script

[Strangeplant]

Hi, I am using the floating menu script found at
http://www.dynamicdrive.com/dynamici...staticmenu.htm which really works great. However, I want to have the menu link color different from what is set in the .css sheet for the body links, and still keep the hover color working so it looks like a link instead of a menu heading. An inline style change of color in the <a> link overrides the .css setting but disables the active and hover link properties. Attempting to set properties for <p>, <table>, etc in the .css does not apply to the <a> link. I don't want to use iframes because of cross-browser compatibility difficulties with the perfectly-working menu. Is it possible to swap .css files only while hovering over a link? or can this even be done at all?

Thanks,

/strangeplant

[jscheuer1]

<style type="text/css">
#divStayTopLeft a {
color:black;
}
</style>

Or just add the green part to an existing stylesheet. Use whatever color you like. Existing hover properties should still apply. If not, make your own:

<style type="text/css">
#divStayTopLeft a:hover {
color:purple;
}
</style>

These things tend to vary by browser so, check it out in all target browsers. And, if you want to avoid problems with folks who have selected your foreground color as their default background color, always specify a background-color too.

[Strangeplant]

Well, this doesn't exactly work. It acts as though you can only have one definition of a:hover and a:link to a page. (I'm using a .css for all fo this.) If I change the a:link color for the #div, it also changes it for the body, and even then it seems to depend on whether the #div color defs are before or after the main a:link or a:hover declaration since the menu is called at the bottom of the page.

So, I finally wrote some onMouseOver and onMouseOut functions to change the colors and change them back. So, for each menu line I have:

<a style="color:808080;" onMouseOver="javascript:lightLink(this, '#cc0000');" onMouseOut="javascript:unlightLink(this);" href="#5">Lidar &amp; Images</a><br>

A lot of work, but I couldn't get it done an easy way.

/strangeplant

[ddadmin]

A sure-fire way to style the link color of a certain area on your page is just to explictly declare the colors for it and following the LVHA (link visited hover active) order. So in this case:

#divStayTopLeft a:link{ color: green; }
#divStayTopLeft a:visited { color: green; }
#divStayTopLeft a:hover { color: red; }
#divStayTopLeft a:active { color: blue; }

[Strangeplant]

Thanks for your reply and example. Now things work for me (in all the 5 browsers that I've checked with) as long as all four link attributes are defined anew in the .css #divStayTopLeft declaration. I didn't know about the LVHA order requirement.

This certainly is easier and more versatile that all of the onMouseOver coding that I wrote. (But I'll save it and use it again elsewhere.) Maybe I should have posted this question to the CSS forum.....Thanks again.

/Strangeplant