Image That Changes When Clicked – University Of Making Money Online

A nice effect to have on a page is when someone clicks on an image it changes in some way. For example they may click a button and it may display a message or change in some other way. I have seen this type of feature used on images such as on maps where you press the area or country on a map that you are in and it changes in someway. There are many other possibilities.

The image below is a simple example of an image that changes when you press the mouse button. When you ‘Press’ the mouse button while pointing at this image, it will change to ‘Play’. When you ‘Release’ the mouse button, and the image will change to ‘Pause’.

<===

Point Your Mouse at the Image and
‘Click’ and ‘Hold’ the left button.

There are two pieces of code needed to do this which need to be placed in the <Head> and <Body> of your page as I explain below.

This method of creating this effect will work in most web browsers such as Netscape 4.x or Internet Explorer 4.x (or newer browsers). Earlier browsers do not support the onMouseDown and onMouseUp event handlers (however this is the minority of people now so dont let this put you off using it).

This works by the tag in the hyperlink having three event handlers embedded in it: onMouseDown, onMouseUp and onMouseOut.

Copy the HTML code below into your blog or web page in the <Body>. Make sure you change ‘/hi-icons/2.gif’ in the HTML to the location of the image that you want displaying before someone clicks the image.

<a onclick="return false;" onmousedown="handlePress();return true;" onmouseup="handleRelease();return true;" onmouseout="handleRelease();return true;" href="#any_URL"><img alt="This image changes when you press the mouse button!" src="../hi-icons/2.gif" width="17" height="15" name="imgName" border="0" /></a>

This work by JavaScript code in the <Head> preloading the image files and defining the event handler functions.

The javascript code below needs to placed in the <Head> of your web page. Make sure you change ‘/hi-icons/1.gif’and ‘/hi-icons/2.gif’ in the code to the location of your images.

‘/hi-icons/2.gif’ is the image that is displayed before the mouse click.

‘/hi-icons/1.gif’ is the image that is displayed when the mouse is clicked.

Adding this effect to more than one image on a page is more complicated and requires different code to what is used here. I will provide the information in another post.