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?
Who is Participating?
BogoJokerConnect With a Mentor Commented:
You could even put that javascript on the image, probably they "area" tag.
If you give the form an id like
<form id="theForm" ...>

Then you can submit the form with this javascript on just about any tag:

Just make sure you put that inside the tag for instance:
<area onClick="document.getElementById('theForm').submit();" ... />

Joe P
Umm... how about...

<input type="image" src="x.jpg" alt="Submit" />
For that matter, how about (I haven't tried this):

<input type="submit" style="background: url(x.jpg);" />
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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>
      <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" />
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
MelvinivitchAuthor Commented:
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?

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

So now it would look like:
<area onClick="document.getElementById('theForm').submit();" style="cursor: pointer;" ... />
MelvinivitchAuthor Commented:
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.
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; }

If that doesn't work then I'm out of ideas! =)
Joe P
MelvinivitchAuthor Commented:
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.