Form Submit button on Image

Posted on 2006-11-08
Last Modified: 2012-06-27
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?
Question by:Melvinivitch
  • 4
  • 3
  • 2
  • +1
LVL 19

Expert Comment

ID: 17903956
Umm... how about...

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

Expert Comment

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

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

Expert Comment

ID: 17904061
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" />
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

LVL 17

Expert Comment

ID: 17904101
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
LVL 17

Accepted Solution

BogoJoker earned 400 total points
ID: 17904115
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

Author Comment

ID: 17904259
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?

LVL 17

Expert Comment

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

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

Author Comment

ID: 17904290
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.
LVL 17

Expert Comment

ID: 17904315
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

Author Comment

ID: 17904891
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.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question