OnMouseOver

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

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 changes to a darker color, indicating that it can be clicked.

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 with 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/jargon/v/virus.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