Form Submit button on Image

Posted on 2006-11-08
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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" />
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

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 1600 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


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

752 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