1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML/Javascript - Submitting a form using an image map

Discussion in 'HTML & Website Design' started by edward301, Jun 15, 2005.

  1. #1
    Here is a demo of the code
    http://www.polarhome.com:793/~ed301/vote.html

    I need the form to be submitted when the individual image mapped sections are clicked passing the variable value=(1 to 5) to the form submission.


    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>
    
    
    <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 onClick="this.form.submit();" onmouseover = "document.map.src = '1-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">
      <area shape="rect" coords="39,21,54,41" name=rateit value=3 onClick="this.form.submit();" 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 onClick="this.form.submit();" 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 onClick="this.form.submit();" 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 onClick="this.form.submit();" onmouseover = "document.map.src = '5-star.jpg';" onmouseout = "document.map.src = 'vote.jpg';">
    </map>
    
    
    </tr>
    </table>
    </form>
    Code (markup):
    Thanks Ed301
     
    edward301, Jun 15, 2005 IP
  2. dave487

    dave487 Peon

    Messages:
    701
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Could you just link each of the elements in the image map to some kind of dynamic url to mimic the data your form would have sent?

    eg
    replace
    onClick="this.form.submit();"

    with

    href="/mypage.php3?itemid=<?=$id?>&vote=1"
    href="/mypage.php3?itemid=<?=$id?>&vote=2"

    etc
     
    dave487, Jun 17, 2005 IP
  3. edward301

    edward301 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply I have used your suggestion and added urls to the mapped sections. I just need to make sure google doesnt index the page with the voting number.
     
    edward301, Jun 18, 2005 IP