OnMouseOver

Updated: 01/31/2019 by Computer Hope

OnMouseOver is a JavaScript event that can make your page more interactive by changing an image appearance when the mouse hovers over the image.

Tip

The JavaScript OnMouseOver effect can also be achieved using CSS without the visitor needing to have JavaScript enabled on their browser.

OnMouseOver example

The example below shows you how you could create simple buttons that have an onmouseover effect. When placing your mouse over one of the buttons below, it will change to a darker color indicating that it can be clicked to go to the specified page.

HTML
Online help
Virus information
Computer jargon
Internet Info

OnMouseOver example instructions

Below is an overview of how the above example was created.

In the red sections below are the image files. For example, the om1.gif and om11.gif are the two files used for the on and off positions. The file om1.gif is displayed when the mouse is not over the image, so in the above example would be the light gray. When hovering over the image, it would change to om11.gif a darker gray. You can follow this same format when creating your images or if so desired you can change the naming format.

The blue section is the variable to store the on and off image locations for each button. For example, onef is the off position (f for off) and oneo is the mouse on position image. In our above example, there are five buttons that have a set of two images, so a total of 10 images.

In the Orange sections are the image links. These links could point to any page you want the button to forward the visitor to on your website.

<script>
<!--
if (document.images) {
 var onef = new Image();
 onef.src ="https://www.computerhope.com/jargon/o/om1.gif";
 var oneo = new Image();
 oneo.src = "https://www.computerhope.com/jargon/o/om11.gif";
 var twof = new Image();
 twof.src = "https://www.computerhope.com/jargon/o/om2.gif";
 var twoo = new Image();
 twoo.src = "https://www.computerhope.com/jargon/o/om22.gif";
 var threef = new Image();
 threef.src = "https://www.computerhope.com/jargon/o/om3.gif";
 var threeo = new Image();
 threeo.src = "https://www.computerhope.com/jargon/o/om33.gif";
 var fourf = new Image();
 fourf.src = "https://www.computerhope.com/jargon/o/om4.gif";
 var fouro = new Image();
 fouro.src = "https://www.computerhope.com/jargon/o/om44.gif";
 var fivef = new Image();
 fivef.src = "https://www.computerhope.com/jargon/o/om5.gif";
 var fiveo = new Image();
 fiveo.src = "https://www.computerhope.com/jargon/o/om55.gif";
}
   
function act(imgName) {
 if (document.images) document[imgName].src = eval(imgName + "o.src");
}
   
function inact(imgName) {
 if (document.images) document[imgName].src = eval(imgName + "f.src");
}
// -->
</script>

<p>
<a href="https://www.computerhope.com/learnhtm.htm" onMouseOver="act('one')" onMouseOut="inact('one')">
<img src="https://www.computerhope.com/jargon/o/om1.gif" name="one" alt="HTML"></a><br>
<a href="https://www.computerhope.com/oh.htm" onMouseOver="act('two')" onMouseOut="inact('two')">
<img src="https://www.computerhope.com/jargon/o/om2.gif" name="two" alt="Online help"></a><br>
<a href="https://www.computerhope.com/vlist.htm" onMouseOver="act('three')" onMouseOut="inact('three')">
<img src="https://www.computerhope.com/jargon/o/om3.gif" name="three" alt="Virus information"></a><br>
<a href="https://www.computerhope.com/jargon.htm" onMouseOver="act('four')" onMouseOut="inact('four')">
<img src="https://www.computerhope.com/jargon/o/om4.gif" name="four" alt="Computer jargon"></a><br>
<a href="https://www.computerhope.com/jargon/i/internet.htm" onMouseOver="act('five')" onMouseOut="inact('five')">
<img src="https://www.computerhope.com/jargon/o/om5.gif" name="five" alt="Internet Info"></a>
</p>

Event, JavaScript, Programming terms