Mouse Events

Here we are looking at Mouse Events.
Mouse events are different actions done by the user with her mouse. This can be simply to move the mouse pointer into to a field or element. That will trigger an event, in this case the 'onmouseover'. Then you can make a function that will be executed when user moves her mouse over f.ex a <DIV> field.
The example here on the main tab, uses this event, and it also uses the onmouseout event, that will trigger when the mousepointer is moved out from the <DIV> field again. This way works the box here. It will simply turn the background color into Orange when the mouse enters the box, and when removed it will set the background color back to a gray color.
Also I have added the use of another mouse event, the 'onclick' event. It will in this case show an Alert box. Try it out yourself..

 HTML

<DIV ALIGN='center' CLASS='hoverstyle' id='dev'>Hover over me!
<NOBR>(And then click me..)</NOBR></DIV>

 CSS

Here are all the styles I used in the example on the front page.

<style>
.hoverstyle {    
    width:160px;
    height:24px;
    padding:64px;
    border:2px solid #000000;
    background-color:#DDDDDD;
}    
</style>    

 Javascript

<script>
document.getElementById("dev").onmouseover = function() {onmouseover()};
document.getElementById("dev").onmouseout = function() {onmouseout()};
document.getElementById("dev").onclick = function() {onmouseclicked()};

function onmouseover() {
    document.getElementById("dev").style.backgroundColor = "orange";
}

function onmouseout() {
    document.getElementById("dev").style.backgroundColor = "#DDDDDD";
}
function onmouseclicked() {
    alert("You clicked me!");
}
</script>

onclick         User leftclick her mouse
oncontextmenu   User rightclick her mouse
ondblclick      User doubleclick her mouse
onmousedown     User press either of her mousebuttons
onmouseenter    Users mousepointer enters an element
onmouseleave    Users mousepointer leaves an element
onmousemove     Users mousepointer moves over an element
onmouseout      Users mousepointer is moved out of an element
onmouseover     Users mousepointer moves over an element
onmouseup       Users pressed mousebutton is released over an element

 PHP