SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: Help me out...simple rollover!
-
Aug 16, 2006, 14:33 #1
- Join Date
- Jan 2001
- Location
- Exeter, Devon, UK
- Posts
- 477
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Help me out...simple rollover!
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)...
Code:<input id="s1" name="s1" type="image" src="images/staroff.gif" onmouseover="stars('1')">
Code: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'; }
-
Aug 17, 2006, 00:29 #2
- Join Date
- Jun 2006
- Location
- Wensleydale, UK
- Posts
- 20
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
You're using 'getElementsByName' to retrieve your image element. 'getElementsByName' will retrieve a collection of objects. Try using 'getElementById'.
Hope this helps!
Scott
Bookmarks