Using a javascript to change an image when someone moves their mouse over it has become quite popular. I've heard it called many things: "hover buttons", "rollover", and "image highlighter" are a few. What happens is that we use two images, a link, and a javascript to make a clickable image link that is "highlighted" when a mouse passes over it.

To begin, you will need to make yourself two images of the same size, making whatever changes you would like to the second one. Below is an example where I chose to make an image with blue text and one in red text. The red-text image is what I want people to see when they move their mouse over the blue-text image

Superb troubleshooting skills are a must as a programmer. This is especially true with JavaScript as scripting engines can be unbelievably unforgiving. They demand that syntax be absolutely perfect - and if it's not, they'll be sure to let the whole world know you made a mistake by popping up error boxes all over your site (IE). And that's when they're in a good mood - on a bad day they may decide to freeze or crash the browser.

While we can talk about and study proper syntax until we turn blue, you won't be able to execute a script if you don't have good troubleshooting skills. Why?  Because we are human. We make mistakes. Period. Very minor syntax mistakes such as forgetting a period, using a double quote instead of a single quote or misspelling words are all examples of mistakes that will cost you a properly executing script. Since JavaScript is case sensitive, the chance of making a mistake even with a simple statement is quite good. Get used to it, you will make these mistakes.

If you find yourself tempted to throw in the towel after the 106th attempt at a perfectly executing script, don't. Notice the word "skill." Developing a skill requires time and energy. With persistent practice, you'll start to "get it."

Luckily, you have the benefit of learning from not only my mistakes, but also the mistakes I saw students make over and over. I've tried to include warnings for the most common blunders in the lessons, as well as a troubleshooting checklist to get you started.

Dynamic HTML (DHTML) is a collection of strategies (scripting, CSS and DOM) that lets you create web pages that are more interactive, responsive and animated than ever before. The W3 Consortium document object model (DOM) extends access to virtually every HTML element using programming objects as the basic modeling paradigm. This allows a variety of scripting languages to dynamically modify the look of a page as they react to events. Although all modern browsers incorporate DOM, they are not at the same stage and the model itself is being extended. QuirksMode.com gives details of variants. It is always a wise procedure to test any browser that your clients/viewers may use against the w3.org DOM support test.

One of the lesser known sides of external JavaScript is the ability to reference a PHP file instead of the familiar .js file. At first such an notion may seem strange, even impossible; after all, who among us isn't familiar with that barrier dividing server side and client side scripts that prohibit the two from interacting? Well, it turns out superficial exchange is allowed. Using external JavaScript, you'll see how PHP and JavaScript can work together in a way you may not have thought possible, and to the great benefit of JavaScript.

Using the display property of CSS, one can hide segments of content such as detailed descriptions or sub topics until needed. This adds clarity to the presentation. Collapsing menus is a simple application of the visibility property. The function expand uses a pointer from the topic element clicked on to access and unhide its related subtopic element. The next click on the topic element rehides the subtopic. This could be expanded several levels if needed.