About Mouse Events
How to use Mouse Events:

Mouse events. These Javascript events will make it possible to launch code on certain events triggered by the mouse. These can be f.ex onMouseOver, and onClick.

On the Javascript tab you will find a list of several mouse-events.

To the right you can try a working example. If you hover the mouse over the box it will turn into orange, and if you clcik you will be shown an Alertbox.

 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..

Hover over me!
(And then click me..)


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


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

.hoverstyle {    
    border:2px solid #000000;


Here is the script, as used on the first tab.
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!");
And here are the different mouse events listed;

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


Icons made by Freepik from Here is a list of Mouse Events, that you can use to execute code, on events of mouse-moves and clicks.