How to Make an Image Change Link

This tutorial will cover some HTML and beginner Javascript.

Usually when making a navigation bar images are used, may they be a button or a black and white image. When the mouse hovers over the button it may become depressed or the image may turn to color. That is the work of Javascript.

When doing this it is important to have the images stored on your directory (or website), for me, I’ll go with BlackAndWhite.jpg and Color.jpg. When the mouse hovers over the picture it will change from black and white to color.

Somewhere near the top of your html type the following Javascript code, switch where I have my .jpgs for your images:


<SCRIPT language=”javascript1.1″>

    jpgButton1 = new Image(106,100)

    jpgButton1.src = ” BlackAndWhite.jpg”

    jpgButton2 = new Image(106,100)

    jpgButton.src = ” Color.jpg”

    function changeImage(cImg,ref) {

        document.images[cImg].src = ref.src




The first half is telling the site what images you have and their size. The second half is the code that does the switching.

The following code is done in your HTML and creates the link that uses the button switch.


<A href=”index.html” onMouseOver=”changeImage(‘imgHome’,jpgButton2)”


    <IMG src=” BlackAndWhite.jpg” name=”imgHome”>



At first it does seem complicated but listing out the parts might make things easy.

First is that the entire thing is encapsulated in an <A></A> link tag. Inside this link tag is the href where the link is pointing to (in the example is the home page, index.html) and the onMouseOver and onMouseOut events.

The onMouse events are code that is executed when the mouse hovers over or when it is moved away from the image. The onMouse events run the Javascript function changeImage that switches the two images.

Inside the <A> link tags is the image tag <IMG>, this is the starting image and holds the name of the image. It is important to have the name of the image because the changeImage function needs to know the name in order to switch the images (in the example it is called “imgHome”).

Overall it is a small amount of code that can really make your website pop! The changeImage function can be called for any of the images in your website.

-Josh Jones

~ by Arainami on September 10, 2012.

%d bloggers like this: