Quick Reach
The onmouseover event
In web pages, the HTML onmouseover event occurs as the mouse pointer is brought over an element like a div, link, paragraph etc. You can attach JavaScript to onmouseover event for some useful purpose e.g. as the mouse is over an image or a paragraph or div element you can change colors or some other effects. Similarly, you can perform actions to other HTML elements, as onmouseover event occurs.
Following are a few examples of using onmouseover javascript event.
HTML div example with onmouseover event
Following is an HTML div example as onmouseover occurs. We have created a div element with some text inside it. As you bring the mouse over that div element an alert will be shown. See example by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<div id=“divex” style=“border:1px solid red; font-size:15px;” onmouseover=“showalert()”>Bring mouse over div to see onmouseover demo!</div>
<script type=“text/javascript”>
function showalert(){
alert (“onmouseover html event occurred in div!”);
}
</script>
</body>
</html>
|
An onmouseover example in an image
You can also execute JavaScript on image elements as the mouse is over an image. Following is an example of JavaScirpt onmouseover in an image element. As you bring the mouse over the image, the onmouseover event occurs where we attached a javascript function. The function will show an alert.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<img src=“TC_logo.png” onmouseover=“showalert()”>
<script type=“text/javascript”>
function showalert(){
alert (“onmouseover html event occurred in image!”);
}
</script>
</body>
</html>
|
onmouseover javascript example in a link
Following is an example of onmouseover with a link element. As you bring the mouse over the link, a function of javascript will be called that will add text in a paragraph.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<a href=“#” onmouseover=“showalert()”>link onmouseover example</a>
<p id=“para1”></p>
<script type=“text/javascript”>
function showalert(){
//alert (“onmouseover html event occured in image!”);
document.getElementById(‘para1’).innerHTML=“Text added as onmouseover occurred!”;
}
</script>
</body>
</html>
|
As you can see, as onmouseover event occurred, the javascript function added text in the paragraph.
Also see Javascript onclick | javascript onchange
Leave A Comment?