Image Hover with JS

The images on the home page have been given image swap hover over styling with javascript.

The images are all black and white by default but when you hover your mouse over them they swap to colour versions of the pictures.

First I initialize the images and link their sources in a js file:


tile1a = new Image;
tile1b = new Image;

tile1a.src = "img/tile1.jpg";
tile1b.src = "img/tile1a.jpg";

Next I put the command code into the a link of the image:



<a href="about.html" onmouseover="document.tile1.src=tile1a.src" onmouseout="document.tile1.src=tile1b.src" target="_blank"id = "one"><img src="img/tile1a.jpg"  name="tile1" alt="About"></a>


The black and white image is the img src. The mouse over is the colour picture and the mouse out is also the black and white image.