onmouseover i xhtml strict?

Hej.

Jag ska först säga att jag är nybörjare på allt vad gäller programmering, men har en uppgift i skolan där jag ska bygga en portfolio åt mig själv. Ett av kraven är att jag måste använda mig av xhtml strict och att all kod skall validera.

jag har bilder som jag vill ska ändras vid mouseover. den kod jag använt ser ut såhär:

(den här koden ligger i head)
<script type="text/javascript">
<!--

function roll(img_name, img_src)
   {
   document\[img_name\].src = img_src;
   }

//--\>
\</script\>

(det här är de bilder jag vill ska ändras:)

\<a href="index.html" 
onmouseover="roll('sub_but', 'skidakare.jpg')" 
onmouseout="roll('sub_but', 'solnedgang.jpg')"\>

\<img src="solnedgang.jpg" name="sub_but" /\>

\</a\>

koden funkar i webläsaren, men den vill inte validera:

Line 28, Column 57: there is no attribute "name"

har försökt hitta nån motsvarande funktion som inte använder attributet "name", men inte lyckats. Nån som har en lösning eller ett tips eller en idé på vad jag kan göra?!

väldigt tacksam för hjälp!

T ex

	<script type="text/javascript">
	<!--

	function roll(img_id, img_src)
	   {
	   document.[B]getElementById(img_id)[/B].src = img_src;
	   }

	//-->
	</script>

	<a href="index.html" 
	onmouseover="roll('sub_but', 'skidakare.jpg')" 
	onmouseout="roll('sub_but', 'solnedgang.jpg')">

	<img src="solnedgang.jpg" [B]id[/B]="sub_but" />

	</a>

funkar utmärkt! tack för hjälpen!