Change CSS Style using Mouse Events

<html>
<head> 
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
                document.getElementById("p2").style.color = "blue";
}
        function mouseoutEvent()
{
alert("This is MouseOut");
                document.getElementById("p2").style.color = "red";
}
 function mousedownEvent()
{
alert("This is Mousedownt");
                document.getElementById("p2").style.color = "violet";
}

//-->
</script>
<p id="p2" onmouseover="mouseoverevent()"  onmouseout="mouseoutEvent()" onmousedown="mousedownEvent()" > Keep cursor over me</p>

</body>
</html>
Output : 
 

Javascript Events

Keep cursor over me

Comments

Post a Comment

Popular posts from this blog

Javascript Code using getElementById and If Else Statement

  <!DOCTYPE html> <html> <head> <title> Form Elements and Attributes </title> <style> //format and styles div { margin-bottom: 10px; } label { display: inline-block; width: 200px; } fieldset { background: #e1eff2; } legend { padding: 20px 0; font-size: 20px; } </style> <body> <body> <h1> Determine Age Group </h1> <p> Enter your details : </p> <fieldset> <label> Enter your name </label> <input type =" text " onfocus =" this.value='' " name =" fname " id =" fname " value ="" /> <br> <!-- create input text box for name --> <label> Enter your age </label> <input type =" number " onfocus =" this.value='' " name =" age " i...
Read more

Window Screen Properties

 <!DOCTYPE html> <html> <body> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <p id="demo5"></p> <script> document.getElementById("demo").innerHTML =  " screen width is " + screen.Width; document.getElementById("demo1").innerHTML =  "Available screen width is " + screen.availWidth; document.getElementById("demo2").innerHTML =  " screen height is " + screen.height; document.getElementById("demo3").innerHTML =  "Available screen height is " + screen.availHeight; document.getElementById("demo4").innerHTML =  " screen Depth is " + screen.colorDepth; document.getElementById("demo5").innerHTML =  "screen pixelDepth is " + screen.pixelDepth; </script> </body> <...
Read more