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 OnMouseOver event is triggered when a user moves their mouse over a specific element. In the code below, I intermingled use of the OnMouseOver and OnMouseOut events. I start off with a text box with the default value "james." If the user moves their mouse over the box, the value is uppercased and a pop-up box appears telling the user that this has happened. Next, if the user moves their mouse over the Come Here button, a pop-up appears saying: "You came to me!" If the user drags the mouse away from the box, they will get another pop-up alert begging: "No please do not 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>

This event can, once again, be used to protect copyrighted photos on a site:

<html>

<head>

<img src="yourimage.gif"

onmouseover="alert('Leave my pictures alone!')" />

</script>

</head>

<body>

</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: OnMouseUp >>