Help me out...simple rollover!

[KMxRetro]

GAAAAAAAAAAAAH!

Can someone help me out please? I'm putting a rollover script together that basically shows 10 stars. These can be clicked to register a vote...when the user rolls over a star, the selected starts are highlighted (staron.gif) and the others are dimmed (staroff.gif).

So, if user rolls over image 5...images 1,2,3,4 and 5 are highlighted, whilst image 6,7,8,9 and 10 are dimmed. Basically, it doesn't work! I know the code is working to a point, because the text subtitle ("4 out of 10") for example, changes correctly. But the star images DON'T CHANGE! I have staron.gif and staroff.gif in the right place on the server, but the images don't change...they just all stay on staroff.gif.

I'm banging my head against a wall here, so thought I'd ask if anyone can spot anything blatantly obvious...

There are ten of these (named s1, s2, s3 etc)...

<input id="s1" name="s1" type="image" src="images/staroff.gif" onmouseover="stars('1')">

And my javascript is as follows...

var ss = new Array(10);
ss[0] = "s1";ss[1] = "s2";ss[2] = "s3";ss[3] = "s4";ss[4] = "s5";ss[5] = "s6";ss[6] = "s7";ss[7] = "s8";ss[8] = "s9";ss[9] = "s10";

function stars(starsnum) { 
var d;

d = 0;
while (d < 10) {
s = ss[d]
if (d < starsnum) {
document.getElementsByName(s).src = "images/staron.gif"; 
 } else {
document.getElementsByName(s).src = "images/staroff.gif"; 
 }
d++;
}
document.getElementById('scorer').firstChild.nodeValue = starsnum + ' out of 10';
}

Can anybody help?!?

[GreboGuru]

Hi,

You're using 'getElementsByName' to retrieve your image element. 'getElementsByName' will retrieve a collection of objects. Try using 'getElementById'.

Hope this helps!

Scott