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...
- 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:
onMouseOver="window.status='Click here to go to HTML Goodies'; return true">HTML Goodies</A>
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.
Let's break it down.
- onMouseOver is the Event Handler. It denotes that something will happen when the mouse passes over the active text.
- Please notice the semicolon.
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>|
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.
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:
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.
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:
onMouseOver="alert('Hello out there!')";>HTML Goodies</A>
And here's what you get:
Notice again that it's a simple hypertext link format, only this time the onMouseOver is going to enact this line of code:
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.
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:
onClick="alert('Hello out there!')";>HTML Goodies</A>
And here's what it gives you. You'll need to click to get the effect:
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:
<INPUT TYPE="button" VALUE="BACK"
<INPUT TYPE="button" VALUE="FORWARD"
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.
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.
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:
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:
How about a button that creates e-mail? Here you go:
Here's What Did It:
<INPUT TYPE="button" VALUE="Click Here to Write to Me"
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.
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.