Hi everyone! I used DW to build a site but instead of DW generating the code for my rollover navigation I'd like to see if there is something out there that can do it better. (without all the "fluff" DW adds) I don't have buttons. I just have words that change color when rolled over. I have everything ready to go, except the script. lol

I guess I'm just asking if anyone either can do this for me or point me in a direction that I can generate the code online.

Thanks!

CSS

#nav a {
/*styles when not hovered*/
}
#nav a:hover {
/*styles when hovered*/
}

This assumes that your navigation has an attribute id="nav", but it could be anything.

You might try Dynamic Drive's dhtml solution:
http://www.dynamicdrive.com/dynamicindex5/linkover.htm

Of course, dhtml is problematic, in the sense that it's highly browser specific, so you might want to look at dynamicdrive's other options:
http://www.dynamicdrive.com/dynamicindex5/

Deepak

Wayfarer's solution requires NO javascript at all, and would be a preferred method for a rollover.

The only time you should need JavaScript for a simple rollover is if:

1. You need the rollover to work on something other than an "a" element in IE6 or below.
2. you need the rollover to do something such as animate a transition
3. the rollover needs any behavior besides: show on mouseover / hide on mouseout, such as a rollover that only changes states once, or remains in a state until another element is rolled-over.
4. Your rollover activates something else on the page that is not a descendant of the element which is rolled over.
5. The rollover needs to cause a change in the browser window itself, such as the window's location.

Etc.

The only thing I'd add to that, is that it is very useful to understand how CSS sprites work.

Are you familiar with CSS codes?

You should use CSS over Javascript, because it is alot cleaner code, it will make it all text based code which search engines like alot better.

Search Engines are able to read CSS code alot easier and help optimize your site better than using javascript.

Search Engines are able to read CSS code alot easier and help optimize your site better than using javascript.

That's just going to be confusing, and isn't really true anyway. Search engines, by default, don't read either CSS or JavaScript. What they are primarily interested in is the HTML markup, or specifically, the text content in the HTML. If the content exists statically in the HTML document, it doesn't matter if you use JavaScript or CSS to show/hide certain content, as long as it is functional.

If content is being generated with JavaScript, that is totally different.

Hi,

My question pertains both to a text based navigation like the one mentioned in this thread or an image based one like this:
http://www.wellstyled.com/css-nopreload-rollovers.html

What would be the simplest way of making the button stay ON in respect to the page that the user is on.
In other words, what can I do to make the button 1 stay in a rollover state or even a 3rd state, while I'm visiting page 1 and button 2 stay on while I'm at page 2 etc, without individually coding each page.

I hope the question makes sense.

Thanks in advance.

What would be the simplest way of making the button stay ON in respect to the page that the user is on.

The simplest way is to use a class for that button that specifies the rollover state, then you add that class to that link on each given page - ie. <a class="current" href="page2.htm">Page 2</a>

Thanks a lot for the solution.
It is a great one for a site with few buttons and pages but I'm looking to find something that would automatically detect what page it is on and apply a certain class to the appropriate button.
This would help me a lot as I wouldn't have to individually modify tens of pages. It would also make it easier to employ my Dreamweaver templates as it would reduce one extra editable region.
So I was looking for something in JAVA or maybe some simple server-side solution.

Thanks again for all your help.