HTML Image Hover Effects Using Onmouseover

This article shows a quick and easy way to add a hover effect to a graphic used for a link (anchor). The HTML anchor element, <a></a>, is used to jump, i.e. link, to another web page or location. The hover HTML method used in this article is also called the mouse over effect, because it uses the images's onmouseover event to manipulate the link's graphic. For this hover effect example no cascading style sheets (CSS) are used.

What is a web page link in HTML?

As an example, to link to the home page of this website the HTML code would be:

<a href="https://tekeye.uk">Tek Eye Home Page</a>

It shows in the browser as a link like this:

Tek Eye Home Page

How do I use an image for a link?

Instead of a simple text link the HTML img element can be used to replace the text. Set the HTML image src attribute to the image address (URL) or the path on the web server to the image:

<a href="https://tekeye.uk"><img src="images/home.png" alt="Tek Eye Home"/></a>

In this case the link now shows as a home graphic:

How do I generated a HTML hover image effect?

The mouse over image effect uses a tiny bit of JavaScript on two mouse events, onmouseover and onmouseout. The image hover effects are activated as the events fire when the mouse moves over the graphic and then away from the graphic. Firstly two graphics are required for the effect, usually the same image in different colors. Here are the images used for this example:

The HTML hover image effect code sets the image src (for source) attribute to the correct graphic using the onmouseover and onmouseout events. This is the code:

<a href="https://tekeye.uk"><img src="images/home.png" alt="Tek Eye Home" onmouseover="this.src='images/home-g.png';" onmouseout="this.src='images/home.png';"/></a>

With this code when the mouse hovers over the home image it turns green:

If the images used are button graphics then you can get button hover effects in a similar way: