Wednesday, April 23, 2025

JavaScript On Mouse Over, Out

The onmouseover and onmouseout events are triggered when the user moves the mouse over or out of an element on a web page, respectively.

The onmouseover event is triggered when the mouse pointer moves over an element, such as an image, a link, or a button. It can be used to create interactive effects, such as changing the color of the element or displaying additional information.

The onmouseout event is triggered when the mouse pointer moves out of an element, such as an image, a link, or a button. It can be used to revert the element back to its original state, such as changing the color of the element back to its original color.

Both onmouseover and onmouseout can be used to create interactive and dynamic web pages that respond to user actions, and are commonly used in combination with other JavaScript events and functions to create more complex web page interactions. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<form>

<input type="button" value="Custom: On Mouse Over"
onmouseover="alert('On Mouse Over');">

<br><br><br>

<input type="button" value="Custom: On Mouse Out"
onmouseout="alert('On Mouse Out');">

</form>
	
</body>
</html>

This is an HTML form with two buttons.

The first button has an onmouseover event handler that displays an alert message with the text "On Mouse Over" when the user hovers over the button with the mouse.

The second button has an onmouseout event handler that displays an alert message with the text "On Mouse Out" when the user moves the mouse away from the button. These event handlers are triggered by the corresponding mouse events and execute the specified code when the events occur.

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...