Briefly swap image on click, multiple instances on one page

JavaScript
1

So I want to swap an image when it’s clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it’s basically a download button then slightly changes it’s style when clicked on. The problem is that my current code requires me to give each image it’s own specific id / name and I have to recreate more sript code for each image id as well.

The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it’s quite ridiculous as to how much code is required for 25 of the exact same images on the page.

in the header I have:

<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png"; 
 downloadbtn_up  =new Image(); downloadbtn_up.src  ="images/download.png"; 
}
if (document.images) {
 downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png"; 
 downloadbtn2_up  =new Image(); downloadbtn2_up.src  ="images/download.png"; 
}

// 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>

and for each image in the body I have (example is for 2 images):

<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;" 
onMouseUp="releaseButton('downloadbtn');return true;" 
onMouseOut="releaseButton('downloadbtn');return true;" 
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0 
alt="Download"
src="images/download.png"
></a>

<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;" 
onMouseUp="releaseButton('downloadbtn2');return true;" 
onMouseOut="releaseButton('downloadbtn2');return true;" 
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0 
alt="Download"
src="images/download.png"
></a>

I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn’t make sense to have to give each one a specific id and specific javascript for each of those id’s.
I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck.

PLEASE HELP ME!

2

Why not approach this in a simpler way?


<a href="indexpg.htm"
onMouseDown="this.src='images/download_pressed.png';return true;" 
onMouseUp="this.src='images/download.png';return true;" 
onMouseOut="this.src='images/download.png';return true;" 
onClick="return true;"><img id=downloadbtn width=422px height=80px border=0 
alt="Download" src="images/download.png" /></a>
3

Why not approach this in a simpler way?


<a href="indexpg.htm"
onMouseDown="this.src='images/download_pressed.png';" 
onMouseUp="this.src='images/download.png';" 
onMouseOut="this.src='images/download.png';" 
onClick="return true;"><img id=downloadbtn width=422px height=80px border=0 
alt="Download" src="images/download.png" /></a>
4

Because I don’t know javascript lol. Really that’s what I’m trying to do is find the simplest way to do this, especially without adding a new id number to every download image even though they are the exact same. Anyway I tried inserting your code but the image doesn’t change when clicked, was I supposed to change the header javascript code as well?