How to put many rollover images in the same page? non-js

This is my first post as a stackoverflow member.

Hi, my question is how do I make many images that change when you pass your mouse over them? I have a website for a small application that I have made and I have a page with download images for every version, and those images are the target. I had tried two ways to make them rollover, and each way works fine until I put the images in the same page. Then they don't work.

1st way

<a href='Destination URL' target="_top" onmouseover="document.sub_but.src='onrollimage'"onmouseout="document.sub_but.src='image'"><img src="image" width="281" height="55" name="sub_but"></a>

2nd way

<a href="Destination URL"  onmouseover= "if (document.images) document.bn_off.src= 'onrollimage';" onmouseout= "if (document.images) document.bn_off.src= 'image';"><img src="image" name="bn_off"></a>

if I use the same method twice it doesn't work, but if I put the first image the one way and the second image the other way it works fine. I could leave it like this but in the feature I want to put more. Please show me a way that I can put many image rollovers on the same page.

Check the specific page at http://www.torrentcleaner.tk/download.html Also if you want check this http://www.torrentcleaner.tk/dimg/

Solution

The direct answer is to change the code to

onmouseover= "this.children[0].src= 'onrollimage';"

and

onmouseout= "this.children[0].src= 'image';"

The correct way would be to use CSS ..

a.downloadButton{
    display:inline-block;
    height:55px;
    width:281px;
    background:url('path/to/image') top left no-repeat;

    text-indent:-9999px;
    overflow:hidden;
}

a.downloadButton:hover{
    background-image:url('path/to/onrollimage');
}

and change your links to

<a href="Destination URL" class="downloadButton">download</a>