Hallo, ich habe eine hotornot seite und würde gerne das die user per tastendruck (Tasten 1-10) bewerten können.
wie könnte ich das hier einbaun?
HTML-Code:
<form action="index.php" method="post" name="voteForm">
<input type="hidden" name="last_view" value="<?=$row['code']?>" />
<input type="hidden" name="sel_age" value="<?=$_SESSION['sel_age']?>"/>
<input type="hidden" name="sel_sex" value="<?=$_SESSION['sel_sex']?>"/>
<input type="hidden" name="sel_sex_pref" value="<?=$_SESSION['sel_sex_pref']?>"/>
<input type="hidden" name="country" value="<?=$_SESSION['country']?>"/>
<input type="hidden" name="state" value="<?=$_SESSION['state']?>"/>
<div id="bar" class="bar">
<div style="font-size:13px;font-weight:bold;color:#000; margin: 3px;">
<strong class="barr">
<?=SELECT_RATING?></strong>
<span class="colorrabar">
<?php echo $row[username]; ?>
</span><strong> ?</strong>
</div>
<div id="cf">
<div id="r0" class="volHN">
<b class="Not">NOT</b>
</div>
<div id="r1" class="vol" onMouseOver="this.bgColor='#162EAF'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#162EAF'" onclick="document.voteForm.puntaje[0].checked=true;document.voteForm.submit();">
<a id="a1" href="#">
<input onclick="document.voteForm.puntaje[0].checked=true;document.voteForm.submit();" type="radio" value="1" name="puntaje" />1</a>
</div>
<div id="r2" class="vol" onMouseOver="this.bgColor='#322899'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#322899'" onclick="document.voteForm.puntaje[1].checked=true;document.voteForm.submit();">
<a id="a2" href="#">
<input onclick="document.voteForm.puntaje[1].checked=true;document.voteForm.submit();" type="radio" value="2" name="puntaje" />2</a>
</div>
<div id="r3" class="vol" onMouseOver="this.bgColor='#4E2284'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#4E2284'" onclick="document.voteForm.puntaje[2].checked=true;document.voteForm.submit();">
<a id="a3" href="#">
<input onclick="document.voteForm.puntaje[2].checked=true;document.voteForm.submit();" type="radio" value="3" name="puntaje"/>3</a>
</div>
<div id="r4" class="vol" onMouseOver="this.bgColor='#6A1D6F'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#6A1D6F'" onclick="document.voteForm.puntaje[3].checked=true;document.voteForm.submit();">
<a id="a4" href="#">
<input onclick="document.voteForm.puntaje[3].checked=true;document.voteForm.submit();" type="radio" value="4" name="puntaje"/>4</a>
</div>
<div id="r5" class="vol" onMouseOver="this.bgColor='#871759'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#871759'" onclick="document.voteForm.puntaje[4].checked=true;document.voteForm.submit();">
<a id="a5" href="#">
<input onclick="document.voteForm.puntaje[4].checked=true;document.voteForm.submit();" type="radio" value="5" name="puntaje"/>5</a>
</div>
<div id="r6" class="vol" onMouseOver="this.bgColor='#A21245'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#A21245'" onclick="document.voteForm.puntaje[5].checked=true;document.voteForm.submit();">
<a id="a6" href="#">
<input onclick="document.voteForm.puntaje[5].checked=true;document.voteForm.submit();" type="radio" value="6" name="puntaje"/>6</a>
</div>
<div id="r7" class="vol" onMouseOver="this.bgColor='#BF0C2F'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#BF0C2F'" onclick="document.voteForm.puntaje[6].checked=true;document.voteForm.submit();">
<a id="a7" href="#">
<input onclick="document.voteForm.puntaje[6].checked=true;document.voteForm.submit();" type="radio" value="7" name="puntaje"/>7</a>
</div>
<div id="r8" class="vol" onMouseOver="this.bgColor='#DB061A'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#DB061A'" onclick="document.voteForm.puntaje[7].checked=true;document.voteForm.submit();">
<a id="a8" href="#">
<input onclick="document.voteForm.puntaje[7].checked=true;document.voteForm.submit();" type="radio" value="8" name="puntaje"/>8</a>
</div>
<div id="r9" class="vol" onMouseOver="this.bgColor='#EB0101'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#EB0101'" onclick="document.voteForm.puntaje[8].checked=true;document.voteForm.submit();">
<a id="a9" href="#">
<input onclick="document.voteForm.puntaje[8].checked=true;document.voteForm.submit();" type="radio" value="9" name="puntaje"/>9</a>
</div>
<div id="r10" class="vol" onMouseOver="this.bgColor='#FF0000'; this.style.color='#FFFFFF'" onMouseOut="this.bgColor='#FFCC00'; this.style.color='#FF0000'" onclick="document.voteForm.puntaje[9].checked=true;document.voteForm.submit();">
<a id="a10" href="#">
<input onclick="document.voteForm.puntaje[9].checked=true;document.voteForm.submit();" type="radio" value="10" name="puntaje"/>10</a>
</div>
<div id="r11" class="volHN">
<b class="Hot">HOT</b>
</div>
</div>
</div>
</form>
oder wie müßte das javascript aussehen damit man sowas realisieren kann.
Danke!