Mouseovers can be used for all sorts of things. Here is one used to update the contents of a textarea...
Note that although this may look like some sort of text effect, it is not. The "text" is really images. This effect on a page by itself.
Next is an example of what I call a "sticky button". A sticky button is a button that acts as a switch. You click it and it "sticks" until you click it again.
|
This effect on a page by itself.
This is accomplished using a variable in the script that is initially set to "off". When the effect is clicked, that variable is checked to see if it's currently on or off. If off, it does one thing and sets the variable to on. If on, it does a different thing and sets the variable to off.
Here is another example that is used to update frames. This is a little more complex because it "remembers" what is pressed and what is not. Also if you press an already depressed button, it will pop back up. Keep in mind that this is a javascript powered navigation aid. If your visitor has his javascript turned off, or is using a non-js capable browser, he won't get very far. Notice in the script is a <NOSCRIPT> section that inserts plain text links for these folks. It's a little messy, but it gets the job done effectively and efficiently.
Here is a barebones sticky button in the form of a simple switch.
This effect on a page by itself.
Here is a javascript clock that uses images changed by javascript...
|
This clock on a page by itself.
As you can see, there is much potential for sprucing up a page using these mouseover effects. Javascript is a wonderful tool you can use in your pages. With it you can control much of what is on a web page. Every new browser version supports even more powerful Javascript.
I've been asked many times what is the best way to learn javascript. To that I answer "The same way you learn any skill... practice." In this tutorial I've suggested a few exercises. This is where you will do most of your learning. As I've said before, you learn by doing. The more you do, the more proficient you become. You don't learn a skill like you learn your ABC's. You learn a skill like you would learn karate... through many hours of practice and successive skill levels. The more you practice, learn and hone your skills, the "better" you get at it. It's like hiking up a very long hill... you never really get to the top, you just move higher up the hill.
We live in a "drag & drop" and "point & click" computer age. We have been sold on "easy", "quick" and "no effort required". While this all fine and it can certainly be called progress, some of us pay a heavy price for this convenience. We expect immediate gratification for our efforts. Often we expect great results from literally only a few minutes worth of effort. This trend leaves many of us with a severe handicap. We are not used to, and barely capable of, making a concerted effort over a period of time to achieve moderate but consistent results. And, this is exactly what is needed to "learn" javascript.
One of the absolute best resources to have nearby is Netscape's javascript reference. They have an online version, and the references are also downloadable.
Also of great help are the numerous javascript sites scattered about the Internet. A small listing of exceptional sites is available here. One that I want to single out is www.irt.org. What started as a Martin Webb's FAQ for the comp.lang.javascript newsgroup has evolved into an outstanding collection of highly useful javascript information along with articles and FAQs on other web authoring subjects. A definite must-visit.
Well, that's it for this tutorial. I hope you have as much fun building mouseovers as I have had telling you about it.
Have fun!
Joe Barta
| Magic Buttons - Javascript MouseOver Tutorial |
| Part 1 · Part 2 · Part 3 · Part 4 · Part 5 · Images · Index of examples |
| HTML 4.0 Reference Barebones HTML Guide |
|
|
|
|
