Latest

recent

JavaScript onmouseover Event

Definition and Usage

The onmouseover event occurs when the mouse pointer moves over a specified object.

Syntax

onmouseover="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following 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>

Supported by the following JavaScript objects:

layer, link


Example 1

In the following example we will display an alert box when the user moves the mouse pointer over the image:

<img src="image.gif" alt="1000sourcecodes"
onmouseover="alert('Visit 1000sourcecodes!')" />


Example 2

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between two images:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="b_blue.gif"
}
function mouseOut()
{
document.getElementById("b1").src="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.1000sourcecodes.com" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit 1000sourcecodes!" src="b_pink.gif" id="b1" /></a>
</body>
</html>
JavaScript onmouseover Event Reviewed by 1000sourcecodes on 04:15 Rating: 5
Powered by Blogger.