JAVASCRIPT

OnLoad and OnMouse JavaScript Events

In our last article we left off with the OnKeyUp function, which is triggered when a user releases a key on the keyboard. We will continue discussing the various JavaScript events in this article, and hopefully finish them in the next tutorial. So grab yourself some coffee and let’s get to work.

Author Info:

By: James Payne

Poor Best

Rating:

/ 14

December 10, 2007

TABLE OF CONTENTS:

The OnMouseOut event is triggered when you move your mouse away from an element. In the sample below there are several things that happen when the user moves their mouse away from an element. First, the user enters text into the Enter Your Name text box. If the user moves their mouse away from the box, two things happen: first, all of the letters are made uppercase. Second, a pop-up box appears telling them that this has happened.

Next, if the user moves their mouse away from the Come Here button, a pop-up alert will appear begging them: "Please don’t leave me!"

<html>

<head>

function upperCase()

{

var x=document.getElementById("name").value

document.getElementById("name").value=x.toUpperCase()

alert('I uppercased you!')

}

</script>

</head>

<body>

Enter your name: <input type="text" id="name" onmouseout="upperCase()"><br /><br /> <br />

</body>

</html>

Supporting HTML tags: <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supporting Javascript Objects: layer, link

Next: OnMouseOver >>