Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Mail Systems
Eclipse Documentation

How To Guides
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Problem Solutions
Privacy Policy




The JavaScript FAQ
Prev Home Next

OnMouseDown Effects

Question: How do I change an image when the user clicks on it?

Answer: This is very similar to onMouseOver effects. However, the techniques described on this page will work only in Netscape 4.x or Internet Explorer 4.x (or newer browsers) because versions 3.x of both browsers do not support the onMouseDown and onMouseUp event handlers.

Here is a simple example: This image changes when you press the mouse button!
Press the mouse button while pointing at this folder, and it will open. Release the mouse button, and the folder will close.

The <IMG> tag in this example is embedded in a hyperlink that has onMouseDown, onMouseUp and onMouseOut event handlers:

<a href="#any_URL"
onMouseDown="handlePress();return true;" 
onMouseUp="handleRelease();return true;" 
onMouseOut="handleRelease();return true;" 
onClick="return false;"
><img name=imgName width=17 height=15 border=0 
alt="This image changes when you press the mouse button!"
In the <HEAD> section of the page, we have JavaScript code that preloads the image files and defines the event handler functions:
<script language="JavaScript">
if (document.images) {
 img_on =new Image();  img_on.src ="../hi-icons/1.gif"; 
 img_off=new Image();  img_off.src="../hi-icons/2.gif"; 

function handlePress() { 
 if (document.images) document.imgName.src=img_on.src;

function handleRelease() {
 if (document.images) document.imgName.src=img_off.src;


Here is a more complex example with several images: This image changes when you point at it!
The code is very similar to the above, except that now the event handler functions take the image's number as a parameter. (To see the actual code, view the source of this page.) Copyright © 1999-2006, Alexei Kourbatov

The JavaScript FAQ
Prev Home Next

  Mirrored with kind permission of Alexei Kourbatov Design by Interspire