Advanced Java Script: onClick and onMouseOver

Use these to jump around or read it all...

[The onMouseOver Event Handler]
[onMouseOver and Background Colors]
[The Alert Method]
[The onClick Event Handler]
[onClick With Form Buttons]
[Links Within Pages] [E-Mail Button]

In the original JavaScript tutorial, we implemented what one might call a "well-formed" JavaScript. The script was a huge scary thing that sat up in the HTML document's HEAD commands. The script started with the traditional <SCRIPT LANGUAGE="javascript"> and ended with </SCRIPT>. It was then triggered to begin running by an onLoad command stuck in the <BODY>. That format is very common and you'll see it a great deal as you write your own Web pages.

Well, one of the great things about JavaScript, and why I like it so much, is that it can be as complicated as the tutorial above, or as simple as the many examples in this tutorial. What we're going to go over here are a certain class of JavaScript commands called "Event Handlers." These are commands that work directly with existing HTML commands. They work so closely in fact, they work by being embedded right into the HTML command itself.

They're called Event Handlers because they create events. They do things when your users do things. That's a terrible description, but I'm on a tight schedule here. Read on...

We're going to go over a few different Event Handler JavaScript commands here. I'll list them up front. I want you to keep an eye on the capitalization pattern of each. You must keep that pattern every time you use the command. If you don't, the commands won't work. Here's are the commands:

onMouseOver This creates an event when the mouse is passed over active text or image.
onMouseOut This creates an event when the mouse is taken off of an active text image.
onClick This creates an event when active text or images are clicked on.
alert This pops up a dialogue box that contains text and an OK button.

The onMouseOver Event Handler

I'm going to show you the format for using this command in a hypertext link first, explain what the parts mean, then show you what it does. Here's the code:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="window.status='Click here to go to HTML Goodies'; return true">HTML Goodies</A>

And here's what you get. Watch the status bar as you roll your pointer over the link text:

HTML Goodies

Please keep in mind that that full line of code should all go onto one line. Now let's break it down. You should notice right off that the format is a hypertext link with some text stuck in right after the htmlgoodies.com URL. That's how these Event Handlers work. They are "embedded" right into an HTML command. You don't need the traditional <SCRIPT> and </SRCIPT> commands. The code just runs inside of the HTML when your user passes his or her mouse over top.

This line of JavaScript code does the work:

onMouseOver="window.status='Click here to go to HTML Goodies'; return true"

Let's break it down.

onMouseOver is the Event Handler. It denotes that something will happen when the mouse passes over the active text.
window.status is JavaScript code for the browser window status bar. That's the bar down at the bottom of the screen where it reads "Document Done" after a page has loaded. The words that follows IN SINGLE QUOTES are the words that will appear in the status bar when the mouse passes over the active text.
Please notice the semicolon.
return true That is also JavaScript that checks to see if there is a status bar; it finds one and reports back that the text can be placed. I know it seems strange, but you have to play by JavaScript rules to get this effect.

Finally, please take a long slow look at the pattern of equal signs and single and double quotes. It can get confusing, but it has to be just so to get the effect.

Let's go a little further, keeping the exact same format as above but adding another Event Handler. Oh yes, these little puppies can be used in combination. What we're going to do is add the onMouseOut Event Handler so that when your users pass their mouse over the link, they get words in the status bar. Plus now, when the mouse moves off of the link, they get some different words. It gets very long and a little confusing. It also has to all go on one line, here it is:

<A HREF="http://www.htmlgoodies.com" onMouseOver="window.status='Click here to go to HTML Goodies'; return true" onMouseOut="window.status='I said click!'; return true">HTML Goodies</A>

And here's what you get. Again, get it all on one line. Watch the status bar:

HTML Goodies

You'll get two messages every time your mouse moves on or off of the text.

onMouseOver and Background Colors

The onMouseOver is good for more than just posting text. The code below will allow your users to pass their mouse over text and change the actual background color of the page.

<A HREF=""onMouseOver="document.bgColor='black'">Black</a>
<A HREF=""onMouseOver="document.bgColor='green'">Green</a>
<A HREF=""onMouseOver="document.bgColor='yellow'">Yellow</a>
<A HREF=""onMouseOver="document.bgColor='red'">Red</a>
<A HREF=""onMouseOver="document.bgColor='brown'">Brown</a>
<A HREF=""onMouseOver="document.bgColor='white'">White</a>

Once again, notice the hypertext link format. Except this time the onMouseOver is not pointed toward the window.status, but rather to document.bgColor (note the capitalization pattern). BgColor is JavaScript for the HTML document's background color. Every time your user passes their mouse over top of a new color, the background changes.

This particular page has a background image on it, so you'll need to jump to this example to see the script in action.

You could set this up with any hex, the word color code. Here's a long list of them. You could make as many or as few choices as you want by adding or subtracting A HREF commands. What will not work are TEXT, LINK, or VLINK commands. They are a bit more stable. Just for kicks, I'll give you one more little piece of code using the onMouseOver Event Handler. This is a fun little piece that can keep your users guessing. Look at this:

<A HREF="www.htmlgoodies.com"
onMouseOver="parent.location='dude.html'";>HTML Goodies</A>

It all should look familiar by now. The only new item is the "parent.location" command. That is JavaScript for a new page. Here's the effect. Pass your mouse over top, but don't click.

HTML Goodies

Basically what this script does is load the page "dude.html", or whatever page you denote, when the mouse passes over. You'll notice that there is a URL denoted. I have the HTML Goodies address in there. It won't harm the script, and if you're really fast, you may even get that link to be the one that opens up.

It's a hypertext link that doesn't need to be clicked. Use it in good health.

The Alert Method

I'm going to show you the alert method using the onMouseOver since you're already familiar with it. Here's the basic format:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="alert('Hello out there!')";>HTML Goodies</A>

And here's what you get:

HTML Goodies

Notice again that it's a simple hypertext link format, only this time the onMouseOver is going to enact this line of code:

"alert('Hello out there!')";

That code will pop up an Alert Box with the text "Hello out there!" when the user passes the mouse over the link. The user will have to click the OK button on the Alert Box to make it go away.

Just change out the text inside of the parentheses and single quotes to configure this for your own use. Whatever you write will show up on the alert box.

Yes, you could type long sentences. The text will just wrap right around the box.

The onClick Event Handler

You may be well ahead of me here, but I'll say it anyway: OnClick works exactly like onMouseOver except onClick creates the effect when you click on the active text or image. Here's the alert method example from above using onClick:

<A HREF="http://www.htmlgoodies.com"
onClick="alert('Hello out there!')";>HTML Goodies</A>

And here's what it gives you. You'll need to click to get the effect:

HTML Goodies

Same effect, but you have to click on it first. And you also probably noticed the link worked.

Hint: If you use the onClick Event Handler inside a guestbook form submit button and point the onClick to another page, you'll get the effect of someone submitting the form and then being transferred to another page that says "Thanks." It does nothing to the e-mail and has no effect on the guestbook, but it gives a great look. The code would be something like this:

<INPUT TYPE="submit" onClick="parent.location='thankspage.html'">

Now, you may be thinking that onClick is just another version of onMouseOver and can only be used in hypertext links. Not so. See the hint I gave above? OnClick really shines when you use it with form-based link buttons. If you don't know what a link button is, read So, You Want A Link Button, Huh?. Let's get into a few examples, shall we?

OnClick With Form Buttons

Why make your users click on the BACK and FORWARD buttons way at the very top of the browser screen when you could plop them right on the page? Look at this:

Now here's the code:

Here's What's Happening:

<FORM> starts the button.
Input Type="button" is pretty self-explanatory.
Value="---" denotes what will be written on the button.
onClick= denotes that the event will activate when clicked on.
"history.go(##)" is JavaScript that denotes movement through your history file. That's the file that keeps a record of everywhere you've been during that particular surfing jaunt: (1) sends it forward one step, (-1) sends you backward one step.
If you'd like, you could raise or lower those numbers. Setting it to (-4) will take your user back four pages if he or she has that many page in their history file. If not, then the button will not function.
</FORM> ends the button.

You should also know that you could separate these two, employing only one button. Just make sure you keep the beginning and end <FORM> command in place.

Links Within Pages

People ask me all the time how to get link buttons to do jumps within pages. The quick answer is that you can't. The link button places a "?" on the end of its links. That messes it up. But through the magic of an onClick Event Handler...

Here's what made it. Copy the code and place it on your page where you want the button to appear.

Please note that the full INPUT TYPE line of text should all be on the same line.

Here's What's Happening:

The button is created the same as above except:

onClick="parent.location='#code'"

You saw parent.location above. It means to load a page into the browser window.
The '#code' denotes the point where this script will jump to. See, you're not offering a new page, so the script must look to the current page. On that page there will be a place called #code. If you haven't already, read all about page jumps in my page jump tutorial. It'll help you understand this a little better.

Denote the point on the page the button will jump to by placing:

It's the same format as you would use with a text-based page jump link. You will need to choose a new "code" for every point you denote on the page.

E-Mail Button

How about a button that creates e-mail? Here you go:

Here's What Did It:

Please note that the full INPUT TYPE line of text should all be on the same line. The button works the same way as the link button above but this time it is enacting a simple mailto: like you would use to create an e-mail hypertext link. See Primer Four if you don't know what I mean. If you use this button, be sure to change out your e-mail address where mine sits now. And remember, no space between mailto: and the address.

Well, that's a quick look at some JavaScript Event Handlers. They are useful because they're nice and quick, they sit inside the HTML, and they do great tricks.

By the way, in case you're wondering, the onLoad command we used in the first JavaScript tutorial is also an Event Handler and it'll work just like those above did. It'll just enact the event when the page loads. So, if you'd like an alert box to pop up when the page loads, change the onMouseOver from above with onLoad and you'll get the effect.

If you haven't taken it from the tutorial, these Event Handlers are quite interchangeable. Try swapping out one for another. You'll find great new events just from playing around. Just be very careful to keep the double and single quote patterns the same or you'll get errors.

Enjoy!

[The onMouseOver Event Handler]
[onMouseOver and Background Colors]
[The Alert Method]
[The onClick Event Handler]
[onClick With Form Buttons]
[Links Within Pages] [E-Mail Button]

Advanced Java Script: onClick and onMouseOver

The onMouseOver Event Handler

onMouseOver and Background Colors

The Alert Method

The onClick Event Handler

OnClick With Form Buttons

Links Within Pages

E-Mail Button

Welcome to the bottom of the page!