HoloGuides :: Know Everything !
Programming
JavaScript . onmouseover / onmouseout function


  mouse movement
  onmouseover / ~out
 
 
  Description

The onmouseover is triggered if the user moves the mouse over the document object (e.g. an image with a hyperlink). The onmouseout is run if the mouse pointer moves out of the object. 
  Syntax

single action for any hyperlink

<a href="javascript:void(0)" onmouseover="your_function_name_if_mouse_over('anyParameter');">...</a>

<a href="javascript:void(0)" onmouseout="your_function_name_if_mouse_out('anyParameter');">...</a>

combined into one hyperlink

<a href="javascript:void(0)"
onmouseover="func_if_over('anyParameter');" onmouseout="function_if_out('anyParameter');" >
  Syntax example
with image preload

// the html HEAD part

<head> ... standard head stuff ...

<script language="JavaScript">
<!--

// preloading the required images

myImg_mouseover = new Image(64,32);
myImg_mouseover.src = "Images/onmouseover.jpg";

myImg_mouseout = new Image(64,32);
myImg_mouseout.src = "Images/onmouseout.jpg";


// functions to call by onmouseover / out - trigger

function CyG_JS_setOnMouseOverImage(myImage)
  {
  document[myImage].src = eval(myImage + "_mouseover.src"); // set the src to myImg_mouseover.src
  }

function CyG_JS_setOnMouseOutImage(myImage)
  {
  document[myImage].src = eval(myImage + "_mouseout.src"); // set the src to onmouseout.jpg
  }
// -->
</script>

</head>

// the html BODY part

<body> 

// "javascript:void(0)" tells the browser no link to be followed; you might put a regular link here...
<a href="javascript:void(0)" 
onmouseover="CyG_JS_setOnMouseOverImage('myImg');"
onmouseout="CyG_JS_setOnMouseOutImage('myImg');" >
<img name="myImg" src="Images/onmouseout.jpg">
</a>

</body> 

 
  Working sample

 

move the mouse over the image and see the rectangle change its colour
onmouseover.jpg is loaded

move the mouse out of the image and see the rectangle get white again
onmouseout.jpg