Now here's the 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.

Yes, you can 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:

onClick="alert('Hello out there!')";>HTML Goodies  

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:


  

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. 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 can plop them right on the page? Look at this: 
  
Now here's the code: 






 

Here's What's Happening:


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 can 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.


ends the button. 
You should also know that you can separate these two, employing only one button. Just make sure you keep the beginning and end 
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. 



VALUE="Click To Go To the Bottom Of The Page"
onClick="parent.location='#code'">

 

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. 

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: 



 onClick="parent.location='mailto:[email protected]'">

  

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. 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