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.
The JavaScript OnMouseOver effect can also be achieved using CSS without the visitor needing to have JavaScript enabled on their browser.
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.
Event, JavaScript, Programming terms
