How to code an Image Mouse Hover colour change

A great feature to use on your website is to make an image change colour when the user hovers over it with their mouse or cursor. It is especially handy when you are trying to get a customer to click on a particular image, and surprisingly is extremely easy to code with html.

Here is a sample of one I have done recently for a client, where we wanted to draw attention to the button and entice the customers to click it. This is the original image.  (We have set it up to be clickable so the hover feature is present, but clicking it will just re-load this same page)

The raw html coding for the below image is:

<a href=”https://www.rothenterprise.com/code-image-mouse-hover-colour-change”><img class=”aligncenter” src=”https://www.rothenterprise.com/wp-content/uploads/2014/07/Enquire-Today.png” /></a>

To change the image so a different image loads when the user hovers on it, simply add the following coding after the SRC= and add the 2nd image url in along with the 1st one, both in the relevant positions:

src=”FIRST IMAGE URL GOES HERE” onmouseover=”this.src=’SECOND IMAGE URL GOES HERE'” onmouseout=”this.src=’FIRST IMAGE URL GOES HERE'”

So the full image html code would change to:

<a href=”https://www.rothenterprise.com/code-image-mouse-hover-colour-change”> <img class=”aligncenter” src=”https://www.rothenterprise.com/wp-content/uploads/2014/07/Enquire-Today.png” onmouseover=”this.src=’https://www.rothenterprise.com/wp-content/uploads/2014/07/Enquire-Today-Orange.png'” onmouseout=”this.src=’https://www.rothenterprise.com/wp-content/uploads/2014/07/Enquire-Today.png'”/></a>

And the final result will be as below: