Skip to main content

Javascript Mouse Events

Now i'm going to explain you about click events. An event can be generated by clicking of mouse or pointing of mouse. Its very simple just use objects and make their this function. Main benafit of javascript is that it can be embedded in HTML very easily either in head section or body section or you may create a seprate file of javascript and save that file with the extension of .js
The simple method of adding javascript file in html is to call that file in head section.



HTML & Javascript Code :

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css"/>

<title>click event</title></head>

<body>

<div id="box" onmousedown="mDown(this)" onmouseup="mUp(this)"> Click me</div></br>

</br>

<div id="box" onmouseover="mOver(this)" onmouseout="mOut(this)"> click me too</div>

<script type="text/javascript">



function mDown(obj)

{

obj.style.backgroundColor="blue";

obj.innerHTML="release me"

}

function mUp(obj)

{

obj.style.backgroundColor="#F17A9E";

obj.innerHTML="Click me"

}

function mOver(obj)

{

obj.style.backgroundColor="green";

obj.innerHTML="mouse is on me"

}

function mOut(obj)

{

obj.style.backgroundColor="#F17A9E";

obj.innerHTML="mouse is not on me"

}



</script>

</body>

</html>

CSS: 

#box{

    background-color:#F17A9E;

    padding:20px 10px 40px 20px;

    height:30px;

    width:60px;

    margin-left:30px;

}

Enjoy this code and apply it as per your requirment. Hope you will like this.
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1
Post a Comment
Read more