Any idea why this wont work?

Advert test
#1
the code below works when "bob" is changed to "image" - any ideas why?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>
<script>
function rateOver(rateId){
    
    for(i=1; i<=10; i++){
        bob = eval("document.getElementById('bob" + i + "')")
        if (bob != null)
            bob.src="empty.gif";
    }

    var voteCount2 = rateId.substring(5,7);
    for(i=1; i<=voteCount2; i++){
        bob = eval("document.getElementById('bob" + i + "')")
        if (bob != null)
        bob.src="full.gif";
    }
}
</script>

<body>

            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=1&amp;foneblog=1139936944453"><img src="empty.gif" value="1" id="bob1" alt="1/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=2&amp;foneblog=1139936944453"><img src="empty.gif" value="2" id="bob2" alt="2/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=3&amp;foneblog=1139936944453"><img src="empty.gif" value="3" id="bob3" alt="3/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=4&amp;foneblog=1139936944453"><img src="empty.gif" value="4" id="bob4" alt="4/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=5&amp;foneblog=1139936944454"><img src="empty.gif" value="5" id="bob5" alt="5/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=6&amp;foneblog=1139936944454"><img src="empty.gif" value="6" id="bob6" alt="6/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=7&amp;foneblog=1139936944454"><img src="empty.gif" value="7" id="bob7" alt="7/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=8&amp;foneblog=1139936944454"><img src="empty.gif" value="8" id="bob8" alt="8/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=9&amp;foneblog=1139936944454"><img src="empty.gif" value="9" id="bob9" alt="9/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            
             <a href="/Voteentry?entryId=ff8080810963e23a010964416d020005&vote=10&amp;foneblog=1139936944454"><img src="empty.gif" value="10" id="bob10" alt="10/10" onMouseOver="rateOver(id)" style="cursor: pointer; cursor: hand;" border="0"/></a>&nbsp;            
            

         </s

</body>
</html>
 
#2
ok let me refine the problem

I am using the folling script

Code:
function starOver(imageId){
    
    for(i=1; i<=10; i++){
        image = eval("document.getElementById('image" + i + "')")
        if (image != null)
            image.src="/images/empty.gif";
    }

    var voteCount = imageId.substring(5,7);
    for(i=1; i<=voteCount; i++){
        image = eval("document.getElementById('image" + i + "')")
        if (image != null)
        image.src="/images/full.gif";
    }
}

function rateOver(rateId){
    
    for(i=1; i<=10; i++){
        image = eval("document.getElementById('rate" + i + "')")
        if (image != null)
            image.src="/images/empty.gif";
    }

    var voteCount2 = rateId.substring(5,7);
    for(i=1; i<=voteCount2; i++){
        image = eval("document.getElementById('rate" + i + "')")
        if (image != null)
        image.src="/images/full.gif";
    }
}
and the following HTML

Code:
First rating box
             <a href="vote=1"><img src="/images/empty.gif" value="1" id="rate1" alt="1/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=2"><img src="/images/empty.gif" value="2" id="rate2" alt="2/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=3"><img src="/images/empty.gif" value="3" id="rate3" alt="3/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=4"><img src="/images/empty.gif" value="4" id="rate4" alt="4/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=5"><img src="/images/empty.gif" value="5" id="rate5" alt="5/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=6"><img src="/images/empty.gif" value="6" id="rate6" alt="6/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=7"><img src="/images/empty.gif" value="7" id="rate7" alt="7/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=8"><img src="/images/empty.gif" value="8" id="rate8" alt="8/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=9"><img src="/images/empty.gif" value="9" id="rate9" alt="9/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=10"><img src="/images/empty.gif" value="10" id="rate10" alt="10/10" onMouseOver="rateOver(this.id)"  border="0"/></a>&nbsp;            


Second rating box
            
             <a href="vote=1"><img src="/images/empty.gif" value="1" id="image1" alt="1/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=2"><img src="/images/empty.gif" value="2" id="image2" alt="2/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=3"><img src="/images/empty.gif" value="3" id="image3" alt="3/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=4"><img src="/images/empty.gif" value="4" id="image4" alt="4/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=5"><img src="/images/empty.gif" value="5" id="image5" alt="5/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=6"><img src="/images/empty.gif" value="6" id="image6" alt="6/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=7"><img src="/images/empty.gif" value="7" id="image7" alt="7/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=8"><img src="/images/empty.gif" value="8" id="image8" alt="8/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=9"><img src="/images/empty.gif" value="9" id="image9" alt="9/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            
             <a href="vote=10"><img src="/images/empty.gif" value="10" id="image10" alt="10/10" onMouseOver="starOver(this.id)"  border="0"/></a>&nbsp;            
            

         </span>
Each rating area is meant to do a little snazy rollover effect, the 2nd rating area does this, but the first one doesnt

Any ideas?
 
Top