These comments are in regards to the SitePoint.com article 'Simulate a Windows-like Button Using JavaScript'.

Another way to do this: (For me, this is a little easier, I guess it's really a personal preference)

1) Adhere to a standard naming convention. For example I have graphics named:
--> home_n.gif
--> home_r.gif
--> services_n.gif
--> services_r.gif

2) Name my images the same as the graphics:
--> <img src="home_n.gif" id="home" name="home" alt="[ .. ]">

3) Here's the JavaScript function I use:

PHP Code:
function changeImg(elemdir) {
   var 
path "/images/" elem
   
if (dir == "over") {
      
path += "_r.gif";
   }
   else {
      
path += "_n.gif";
   }
   
document.images[elem].src path;

4) Here's your link:

PHP Code:
<a href="#" onMouseOver="changeImg('home', 'over');" onMouseOut="changeImg('home', 'out');">
   <
img src="home_n.gif" id="home" name="home" alt="[ .. ]">
</
a
And you're done... Then you can simply copy and paste the link and image and replace "home" with "services", "contact", etc. Just don't forget to change your alt text for each image.