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
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com

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

  




 

 

The JavaScript FAQ
Prev Home Next

OnMouseOver Effects

Question: How do I change an image when the user's mouse points at it?

Answer: Here is a simple example: This image changes when you point at it!
Point at this folder, and it will open. Move the mouse away, and the folder will close.

In this example, the image is 2.gif; the image is 1.gif. Both files are stored in the ../hi-icons directory. In order to create the "mouseover" effect, the <IMG> tag is embedded in a hyperlink that has onMouseOver and onMouseOut event handlers:

<a href="#any_URL"
onMouseOver="handleOver();return true;" 
onMouseOut="handleOut();return true;" 
><img name=imgName width=17 height=15 border=0 
alt="This image changes when you point at it!"
src="../hi-icons/2.gif"
></a>
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">
<!--
// PRELOADING IMAGES
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 handleOver() { 
 if (document.images) document.imgName.src=img_on.src;
}

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

//-->
</script>

Here is a more complex example with several images: This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! 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.)

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

The JavaScript FAQ
Prev Home Next


 
 
  Mirrored with kind permission of Alexei Kourbatov Design by Interspire