Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Form Submit button on Image

Posted on 2006-11-08
10
Medium Priority
?
243 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
[X]
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
10 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17903956
Umm... how about...

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

Expert Comment

by:VoteyDisciple
ID: 17903957
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
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>
       <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
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!

 
LVL 17

Expert Comment

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

Accepted Solution

by:
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:
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
 

Author Comment

by:Melvinivitch
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?

Thanks.
0
 
LVL 17

Expert Comment

by:BogoJoker
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;" ... />
0
 

Author Comment

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

Expert Comment

by:BogoJoker
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; }
</style>

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

Author Comment

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

Featured Post

Technology Partners: 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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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).
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

597 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