How to Do Mouseover on a Web Page
A mouseover is an effect that takes place when a user moves the mouse cursor over an image and the image changes as a result. Mouseovers are commonly achieved using a client-side scripting language such as JavaScript and are used to create buttons and drop-down menus.
Other People Are Reading
Instructions
-
-
1
Insert the image that will act as the default image for performing the mouseover effect into the HTML document. Do this by adding the following line of code into the body of your HTML document:
<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />
Be sure to give the image a name attribute, as this will be how the JavaScript will reference this particular image. Change the source "myMouseOutImage.jpg" to the name of the image you wish to use as the mouseover's "up" state.
-
2
Insert an opening and closing script tag into the "<head>" section of the web page. The head section of an HTML document is always at the beginning of the document. This is where the JavaScript for the mouseover will be written so that the browser understands what to do with the code. The head section should look similar to the following:
<head>
<title> My First MouseOver </title>
<script language='javascript'>
* Your functions will go here*
</script>
</head>
-
-
3
Create the handler function for the "onMouseOver" event by inserting the following JavaScript into the script section that you inserted into the head section of the web page:
function mouseOn(){
document.images["myimage"].src = "myMouseOverImage.jpg";
}
This function changes the image to the mouseover image that you specify. If the mouseover is a button, this image could be a depressed version of the button to simulate the mouse pushing it down into the page. Change the source "myMouseOverImage.jpg" to the name of the image you wish to use as the mouseover image for the "down" state.
-
4
Create the handler function for the "onMouseOut" event by inserting the following JavaScript into the script section that you inserted into the head section of the web page:
function mouseOff(){
document.images["myimage"].src = "myMouseOutImage.jpg";
}
This function restores the mouseover image to the original "up" position image. Remember to change the source "myMouseOutImage.jpg" to the image name you used for the "up" state.
-
5
Assign the functions to their respective events using the link element to encapsulate the mouseover image element:
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> <img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> </a>
Notice that the the image is now turned into a link by adding an anchor tag around it. The "href" attribute of the link does nothing since the link does not change the page, but the link is essential for creating an event that will trigger the "mouseOver" and "mouseOut" event functions.
-
6
Check that your HTML document looks similar to the following:
<html>
<head>
<title> My First MouseOver </title>
<script language='javascript'>
function mouseOn(){
document.images["myimage"].src = "myMouseOverImage.jpg";
}
function mouseOff(){
document.images["myimage"].src = "myMouseOutImage.jpg";
}
</script>
</head>
<body>
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"><img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /></a>
</body>
</html
-
1
Tips & Warnings
JavaScript is case sensitive, so "mouseOn" is not the same as "MouseOn."
