OnLoad and OnMouse JavaScript Events - OnMouseOver
(Page 5 of 6 )
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>
<script type="text/javascript">
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 />
<input type="submit" id="No please don't leave me!" value= "Come Here" onmouseover="alert('You came to me!')" onmouseout="alert(this.id)">
</body>
</html>
This event can, once again, be used to protect copyrighted photos on a site:
<html>
<head>
<script type="text/javascript">
<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 >>
More JavaScript Articles
More By James Payne
/ 5 
