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?
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. |
