Write DHTML program to handle any 3 mouse event.

565views

written 6.3 years ago by

binitamayekar ★ 6.6k

DHTML Program for Mouse Events

Event onclick is used to set the background color.
Events onmouseover and onmouseout change the font color and style of text inside the span element when mouse come over and go out of the text.
Event ondblclick displays new text when user double-clicks on paragraph line.

<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "This is the Output of ondblclick Mouse Event";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontWeight = 'bold'
}
</script>
</head>
<body>
<center>
<h2>Select the Background Color</h2>
<button onclick="document.body.style.backgroundColor='violet'">Violet</button>
<button onclick="document.body.style.backgroundColor='yellow'">Yellow</button>
<button onclick="document.body.style.backgroundColor='skyblue'">Skyblue</button> 
<button onclick="document.body.style.backgroundColor='white'">White</button>
<br><br>
<span onmouseover="style.color='red';style.fontWeight = 'bold'" onmouseout="style.color='black';
     style.fontWeight = 'normal'">Mouse over this text</span>
<p ondblclick="myFunction()">Double click on this paragraph line to trigger a ondblclick Mouse Event</p>
<p id="demo"></p>
</center>
</body>
</html>

ADD COMMENT EDIT