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
Answertopia.com

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

  




 

 

The JavaScript FAQ
Prev Home Next

Buttons with Images

Question: Can I create "pressable" buttons with images?

Answer: Yes. For each button, you'll need two images: one for the "pressed button" and the other for the "released button". Try the following example: point at any of the buttons below and press the left mouse button - the button image will change to "pressed" state. To watch the button images change back to "released" state, move the (pressed) mouse off the image and then release the mouse button.

Index Home

In this example, the "pressed button" images are btn1down.gif and btn2down.gif; the "released button" images are btn1up.gif and btn2up.gif. In order to make the buttons "pressable", each <IMG> tag is embedded in a hyperlink that has onMouseDown, onMouseUp, onMouseOut and onClick event handlers:

<a href="indexpg.htm"
onMouseDown="pressButton('btn1');return true;" 
onMouseUp="releaseButton('btn1');return true;" 
onMouseOut="releaseButton('btn1');return true;" 
onClick="return true;"
><img name=btn1 width=60 height=22 border=0 
alt="Index"
src="btn1up.gif"
></a>

<a href="startpag.htm"
onMouseDown="pressButton('btn2');return true;" 
onMouseUp="releaseButton('btn2');return true;" 
onMouseOut="releaseButton('btn2');return true;" 
onClick="return true;"
><img name=btn2 width=60 height=22 border=0 
alt="Home"
src="btn2up.gif"
></a>
The <HEAD> section of the page contains JavaScript code that preloads the image files and defines the event handler functions:
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 btn1_down=new Image(); btn1_down.src="btn1down.gif"; 
 btn1_up  =new Image(); btn1_up.src  ="btn1up.gif"; 

 btn2_down=new Image(); btn2_down.src="btn2down.gif"; 
 btn2_up  =new Image(); btn2_up.src  ="btn2up.gif"; 
}

// EVENT HANDLERS
function pressButton(btName) {
 if (document.images)
  eval('document.'+btName+'.src='+btName+'_down.src');
}

function releaseButton(btName) {
 if (document.images)
  eval('document.'+btName+'.src='+btName+'_up.src');
}
//-->
</script>

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

The JavaScript FAQ
Prev Home Next


 
 
  Mirrored with kind permission of Alexei Kourbatov Design by Interspire