HTML/Javascript - Submitting a form using an image map

[edward301]

This code is for a voting/rating form that has 1-5 stars which when moused over change. I require the form to be submitted when the individual image mapped sections are clicked passing the variable "value=(1 to 5)" to the form submission.

I have attempted onClick="this.form.submit();" onmousedown onmouseup and all sorts of other combinations with no success.

Heres the code

<form method=post>

<!-- This line would normaly be <input type=hidden name=itemid value="<?=$id?>"> obtaining the $id from the php page-->

<input type=hidden name=itemid value="1">

<table width=30%>

<tr>

<!-- Content -->

</tr>

<tr>

[/code]
[code]<img src="vote.jpg" name=map width="120" height="50" border="0" usemap="#Stars">

<map name="Stars">

 <area shape="rect" coords="25,21,40,41" name=rateit value=1 onmouseover = "document.map.src = '1-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">

 <area shape="rect" coords="39,21,54,41" name=rateit value=2 onmouseover = "document.map.src = '2-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">

 <area shape="rect" coords="53,21,68,41" name=rateit value=3 onmouseover = "document.map.src = '3-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">

 <area shape="rect" coords="67,21,82,41" name=rateit value=4 onmouseover = "document.map.src = '4-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">

 <area shape="rect" coords="81,21,96,41" name=rateit value=5 onmouseover = "document.map.src = '5-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">

</map>

[/code]
[code]</tr>

</table>

</form>

I can provide a demo of the code (with the images) but im not sure if this goes against WW rules.

Thanks Ed301

[Dijkgraaf]

Why not just have a single star that you repeat?
Then it would be a smaller image file and you can put a different onclick on each one
e.g.

<img src="star.jpg" border="0" onclick="alert(1)";>
<img src="star.jpg" border="0" onclick="alert(2)";>
<img src="star.jpg" border="0" onclick="alert(3)";>
<img src="star.jpg" border="0" onclick="alert(4)";>
<img src="star.jpg" border="0" onclick="alert(5)";>
No nead to use a map.

If you really want to use a map, you will need to put url's in, which takes to them to a page e.g.
voted.php?vote=1 which will then record their vote, and then maybe redirect back to the page.

[garann]

Where are you putting the

onclick="..."

? If you're attaching it to the image, the map, or an area, the problem might be with

this.form.submit()

Because those aren't form fields, they don't know what

this.form

is. You'd need to get a reference to the form some other way, like

document.forms[0]

or

document.getElementById("myForm")

.

To pass your variable, you could do something like

document.forms[0].action='newPage.html?value=2';document.forms[0].submit();

[edward301]

Thanks for your replys I have added hrefs to the mapped sections

href="/page.php?itemid=<?=$id?>&rateit=1"
href="/page.php?itemid=<?=$id?>&rateit=2"
etc

its not ideal but it will suffice.