Validating code for a Javascript Rollover - problems!

I have this javascript file here which acts creates a rollover effect for some buttons I have in a navigation bar on my XHTML page...



if(document.images)
{
buttonHome = new Image
buttonHomeRollover = new Image

buttonHipHop = new Image
buttonHipHopRollover = new Image

buttonPop = new Image
buttonPopRollover = new Image

buttonRock = new Image
buttonRockRollover = new Image

buttonNewReleases = new Image
buttonNewReleasesRollover = new Image

buttonCharts = new Image
buttonChartsRollover = new Image

buttonHome.src = "buttons/homeButton.gif"
buttonHomeRollover.src = "buttons/homeButtonRollover.gif"
buttonHipHop.src = "buttons/hiphopButton.gif"
buttonHipHopRollover.src = "buttons/hiphopButtonRollover.gif"
buttonPop.src = "buttons/popButton.gif"
buttonPopRollover.src = "buttons/popButtonRollover.gif"
buttonRock.src = "buttons/rockButton.gif"
buttonRockRollover.src = "buttons/rockButtonRollover.gif"
buttonNewReleases.src = "buttons/newreleasesButton.gif"
buttonNewReleasesRollover.src = "buttons/newreleasesButtonRollover.gif"
buttonCharts.src = "buttons/chartsButton.gif"
buttonChartsRollover.src = "buttons/chartsButtonRollover.gif"
}

else
{
buttonHome = ""
buttonHomeRollover = ""

buttonHipHop = ""
buttonHipHopRollover = ""

buttonPop = ""
buttonPopRollover = ""

buttonRock = ""
buttonRockRollover = ""

buttonNewReleases = ""
buttonNewReleasesRollover = ""

buttonCharts = ""
buttonChartsRollover = ""

document.home = ""
document.hiphop = ""
document.pop = ""
document.rock = ""
document.newreleases = ""
document.charts = ""
}



Here's the relevant XHTML too...



<div id="navigation">
<table class="width">
<tr>
<td class="button">
<a href="index.htm"
onmouseover="document.home.src=buttonHomeRollover.src"
onmouseout="document.home.src=buttonHome.src">
<img class="border" src="buttons/homeButton.gif" name="home" alt="home"/>
</a>
</td>
<td class="button">
<a href="hiphop.htm"
onmouseover="document.hiphop.src=buttonHipHopRollover.src"
onmouseout="document.hiphop.src=buttonHipHop.src">
<img class="border" src="buttons/hiphopButton.gif" name="hiphop" alt="hiphop"/>
</a>
</td>
<td class="button">
<a href="pop.htm"
onmouseover="document.pop.src=buttonPopRollover.src"
onmouseout="document.pop.src=buttonPop.src">
<img class="border" src="buttons/popButton.gif" name="pop" alt="pop"/>
</a>
</td>
<td class="button">
<a href="rock.htm"
onmouseover="document.rock.src=buttonRockRollover.src"
onmouseout="document.rock.src=buttonRock.src">
<img class="border" src="buttons/rockButton.gif" name="rock" alt="rock"/>
</a>
</td>
<td class="button">
<a href="newreleases.htm"
onmouseover="document.newreleases.src=buttonNewReleasesRollover.src"
onmouseout="document.newreleases.src=buttonNewReleases.src">
<img class="border" src="buttons/newreleasesButton.gif" name="newreleases" alt="newreleases"/>
</a>
</td>
<td class="button">
<a href="charts.htm"
onmouseover="document.charts.src=buttonChartsRollover.src"
onmouseout="document.charts.src=buttonCharts.src">
<img class="border" src="buttons/chartsButton.gif" name="charts" alt="charts"/>
</a>
</td>
</tr>
</table>
</div>



Basically, I'm trying to validate my XHTML page in XHTML 1.0 Strict, only trouble is, XHTML Strict 1.0 no longer accepts the use of the 'name' attribute within the <img> tag. When I delete the 'name' attribute of the <img> tags in my XHTML file, my javascript rollovers no longer work. Can anyone help me satisfy the problem of getting the rollovers to work but at the same time getting the code to validate in XHTML 1.0 Strict please?

I'm new to this kinda stuff, only a university student.

dont cross post! use the id attribute instead that should work in place of the name attribute