Solved

Form Submit button on Image

Posted on 2006-11-08
10
230 Views
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?
0
Comment
Question by:Melvinivitch
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
Comment Utility
Umm... how about...

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

Expert Comment

by:VoteyDisciple
Comment Utility
For that matter, how about (I haven't tried this):

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

Expert Comment

by:jay_gadhavi
Comment Utility
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>
0
 
LVL 17

Expert Comment

by:BogoJoker
Comment Utility
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
0
 
LVL 17

Accepted Solution

by:
BogoJoker earned 400 total points
Comment Utility
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:
onClick="document.getElementById('theForm').submit();"

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

Joe P
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Melvinivitch
Comment Utility
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.
0
 
LVL 17

Expert Comment

by:BogoJoker
Comment Utility
Sure on the same tag add:
style="cursor: pointer;"

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

Author Comment

by:Melvinivitch
Comment Utility
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.
0
 
LVL 17

Expert Comment

by:BogoJoker
Comment Utility
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
0
 

Author Comment

by:Melvinivitch
Comment Utility
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.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now