Categories:
Partners

Creating depressible images

Using JavaScript, we can make any image appear depressed when the user presses down on the image with his/her mouse, and pop back up when he releases it. This creates a depressible image. The two events that help realize this effect are:

onMousedown Use this to invoke JavaScript when the mouse is down
onMouseup Use this to invoke JavaScript when the mouse is down-than up.

This is all we need to know to begin creating depressible images! Note that preloading images is  necessary, since we want the swapping of images to be instantaneous. Lets get on with it, shall we?

Click here for example

This image will "depress" when you click down on it.

<head>
<script type="text/javascript">
//preload images first
img1=new Image()
img1.src="up.gif"
img2=new Image()
img2.src="down.gif"
</script>
</head>

<body>
<a href="whatever.htm" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>
</body>

As you can see, the entire proccess is pretty simple and painless.

You are by no means limited to using these two new events only for creating depressible images. Use your creativity! Anytime you want something to happen upon holding down the mouse, you can use these event handlers!

Depressible image links equal good design

While I'm not a big fan of fancy stuff, this time, its different. Before depressible images, there were rollover effects, which, whether or not you know it, was an attempt to lure the surfer to click on its links. However, since the effect takes place when user's mouse moves over the links, and not upon clicking it, it usually fails to achieve its goal, with surfers only moving their mouse over it, but not actually clicking it. Creating depressible image links are a great enticement to get users to explore deeper into your site, with minimal JavaScript coding. If you don't believe me, just ask yourself how many times you have already clicked on that big juicy button...

Just in case you want to use the two images above for your button, you can easily grab them here.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.