I've been pulling my hair out over this problem:

I have a webpage where the user can rate things by clicking on stars below the item. So if they wanted to give it a 3, they'd click on the 3rd star. I have it setup so that it does a regular javascript rollover to replace the image with the number of stars they selected highlighted. My problem is that I use an image map (instead of 10 seperate single images). Here's some code:

PHP Code:

<IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v0" ISMAP
USEMAP
="#ClickMap"> <SPAN ID='v0t'>Vote now!</SPAN><BR>
<
IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v1" ISMAP
USEMAP
="#ClickMap"> <SPAN ID='v1t'>Vote now!</SPAN><BR>
<
IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v2" ISMAP
USEMAP
="#ClickMap"> <SPAN ID='v2t'>Vote now!</SPAN><BR>
...


        <
MAP NAME="ClickMap">
                <
AREA SHAPE=RECT COORDS="0,0,15,15" HREF="#" ALT="1"
                
onMouseOver="imgOn(this.name,1);" onMouseOut="imgOff(this.name,0)"
                
onClick="vote(this.name,1)">
                <
AREA SHAPE=RECT COORDS="15,0,29,15" HREF="#" ALT="2"
                
onMouseOver="imgOn(this.name,2)" onMouseOut="imgOff(this.name,0)"
                
onClick="vote(this.name,2)">
                <
AREA SHAPE=RECT COORDS="29,0,43,15" HREF="#" ALT="3"
                
onMouseOver="imgOn(this.name,3)" onMouseOut="imgOff(this.name,0)"
                
onClick="vote(this.name,3)">

                ...
        </
MAP
First of all this.name isn't valid, but you can see that if I hardcoded the object name to replace, I would need a lot of image maps--one for every item I wanted the user to be able to vote on. What I want to do is something conceptually like "this.parentImage.name" instead of this.name. Then one function could be used throught for ranking.

Any suggestions?

Thanks,
Owen