asked on

Form Submit button on Image

I have an HMTL form with a submit button. I want that submit button to exist and be clickable on an existing image.

The closest thing I can think of for this is to define a <map> that's applied to the image in order to define a clickable region, but how do I get the submit button in there?

VoteyDisciple

Umm... how about...

<input type="image" src="x.jpg" alt="Submit" />

VoteyDisciple

For that matter, how about (I haven't tried this):

<input type="submit" style="background: url(x.jpg);" />

jay_gadhavi

Use this following example: the example contains the Map tag which drown on the image as the rectengal coordinats
i used it. and it is perfectly work.
With the Alt tag u can give the submit command as i give the different location name.
[note : you can draw the rect with the x,y coordinates.]
[note : you can give the onclick command on the map tag and call the javascript function and after in the javascript function you can call the submit method with "window.document.forms[0].submit();"]

<table align=center>
       <tr>
      <td id="tdImage" runat=server width="700px" >

<img id="imgHome" src="Images/Home Image.jpg" border=0 height="700" width="700" runat=server alt="RemoteArea" usemap="#HomePageImage" />
<map id ="HomePageImage" name="HomePageImage">
<area shape ="rect" coords ="310,260,190,235" href ="level1.aspx?locationid=151" target ="_parent" alt="CHVista" />
<area shape ="rect" coords ="620,305,463,280" href ="level1.aspx?locationid=150" target ="_parent" alt="ChSchool" />
<area shape ="rect" coords ="278,430,165,405" href ="level1.aspx?locationid=152" target ="_parent" alt="AlEn" />
</map>

                          </td>
                          </tr>
                          </table>

BogoJoker

Here is one way:
<input type="image" src="x.jpg" onClick="this.form.submit();" />

That has javascript that submits the form when the button (the image) is clicked.
Should work fine for you.

Joe P

ASKER CERTIFIED SOLUTION

BogoJoker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Melvinivitch

ASKER

Ok, I implemented the suggestion to use onclick in the area tag, having it call a javascript function which then submitted the form.

That works fine, except that when the user mouses over the area, the cursor does not change to indicate that the mouse is currently over a clickable region, because there's no "href=" in the area tag, as I'm using onclick instead... Is there a fix for this?

Thanks.

BogoJoker

Sure on the same tag add:
style="cursor: pointer;"

So now it would look like:
<area onClick="document.getElementById('theForm').submit();" style="cursor: pointer;" ... />

Melvinivitch

ASKER

Good suggestion on the cursor property... Unfortunately, it's not working (though I don't see why). Here's my tag now:

<area shape="rect" coords="551,26,625,109" onclick="submitViewCartForm()" style="cursor: pointer" />

It fails in both IE and Firefox.

BogoJoker

Hmmm. I guess you could externalize the style a little:
<area shape="rect" coords="551,26,625,109" onclick="submitViewCartForm()" class="pointer" />

And in your <head> section add:
<style type="text/css">
.pointer { cursor: pointer; }
.pointer:hover { cursor: pointer; }
</style>

If that doesn't work then I'm out of ideas! =)
Joe P

Melvinivitch

ASKER

Thanks Joe. It still doesn't work in the area tag, but I chopped up my image and put the pieces into a table with no borders, spacing, or padding. I then applied the pointer class to my desired image, and set the onclick javascript on it as well. So I have the complete desired functionality. Thanks.