Solved

How do I make a 'gif image' a submit button?

Posted on 1998-08-04
14
269 Views
Last Modified: 2010-04-09
Everyone knows you can just use the ugly old Submit button with the codes 'input type = submit....' but what if you want to make a nicer looking button, say with a gif that you made.  My question is how do you make the gif a submit button  NOTE: I know I can use links but I can't do that because there are several hidden form fields (pasted below) that need to be passed with the button.  You may may have to use javascript to solve this problem but I'm not sure - does anybody know.  I would appreciate your help.  Thanx.  


                                                              THE CODES

<form action="/scripts/samples/search/queryhit.idq" method="GET">
<input type="hidden" name="CiMaxRecordsPerPage" value="10">
<input type="hidden" name="CiScope" value="/">
<input type="hidden" name="TemplateName" value="queryhit">
<input type="hidden" name="CiSort" value="rank[d]">
<input type="hidden" name="HTMLQueryForm" value="/samples/search/queryhit.htm">
 <table BORDER="0" width="15">
<tr>
<td >
<input type="text" size="6" maxlength="100" name="CiRestriction"value="Search">
</td>
</tr>
<tr>
<td>
<img src="searchgo.gif" border="0" width="72" height="22">
 </td>
</tr>
<tr>
<td>
<img src="/searchtext.gif">
</td>
</tr>
</form>

0
Comment
Question by:mendelsohn
[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
  • +4
14 Comments
 
LVL 28

Expert Comment

by:sybe
ID: 1845044
<input type="image" scr="image.gif">
0
 
LVL 28

Expert Comment

by:sybe
ID: 1845045
Sorry, typo:

<input type="image" src="image.gif">

You can treat it like an image tag, so include width=".." height=".." border="0" etc.


0
 
LVL 8

Expert Comment

by:jbirk
ID: 1845046
sybe's suggestion is normally the way to do this.  It will submit the form when you click on the image.

However there is also another way to do it with <IMG SRC="image.gif"> instead of <INPUT type="image" src="image.gif">
It would look like this:
<A HREF="JavaScript:document.theForm.submit();"><IMG SRC="image.gif"></A>
And then you have to name the form: "theForm" (or substitute whatever name you prefer and change it also in the JavaScript command).

Doing it this way, you can also use the onclick command and onmouseover without some of the problems that <input type=image> tags sometimes have.  Of course, using the <imput type=image> is ususaly the way to do it since it's simpler and works fine as long as nothing complicated needs to be done with the form.

Also, two caveats about using my proposed method:
1. The form must have a CGI action (will not work with mailto actions)
2. it won't work in IE if you put the submit section as an onclick event instead of called from the anchor href (it's fine as it is now)

Hope this helps,
Josh
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 10

Expert Comment

by:MasseyM
ID: 1845047
<form action="/scripts/samples/search/queryhit.idq" method="GET">
<input type="hidden" name="CiMaxRecordsPerPage" value="10">
<input type="hidden" name="CiScope" value="/">
<input type="hidden" name="TemplateName" value="queryhit">
<input type="hidden" name="CiSort" value="rank[d]">
<input type="hidden" name="HTMLQueryForm" value="/samples/search/queryhit.htm">
 <table BORDER="0" width="15">
<tr>
<td > 
<input type="text" size="6" maxlength="100" name="CiRestriction"value="Search">
</td>
</tr>
<tr>
<td>
<input type="image" src="searchgo.gif" border="0" width="72" height="22">
 </td>
</tr>
</form>

0
 
LVL 28

Expert Comment

by:sybe
ID: 1845048
Mendelsohn,

You have rejected my proposed answer. Which is up to you of course. But you did not give any comment why. The thing is that it is an answer to your question. It might be not the answer you are looking for, but then it would be nice to have some explanation. Then, me (and other experts) can try to answer your question differently.

0
 

Expert Comment

by:eriklee
ID: 1845049
SYBE's answer looks perfect to me.. or is it just me..?
0
 

Expert Comment

by:cdiweb
ID: 1845050
Sybe's <input type="image" src="image.gif"> will certainly work.

Don't reject answers unless they are WRONG. Both answers posted here are correct, and technically speaking, identical. (Although MassyMs has more meat to it, the answer is still the same.)


0
 
LVL 10

Expert Comment

by:MasseyM
ID: 1845051
Why did you reject my answer?
0
 

Author Comment

by:mendelsohn
ID: 1845052
Sybe's responded first with the right answer and ahould get the points.
0
 

Author Comment

by:mendelsohn
ID: 1845053
Sybe - repost an answer and I will give you the points - sorry about the problems and thanx for your help.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1845054
Good move mendelsohn!
-Josh
0
 
LVL 10

Expert Comment

by:MasseyM
ID: 1845055
Correct, but whos answer are you going to use?  I bet your code looks a lot like mine...

- Matt

ps. give Sybe the points though
0
 
LVL 28

Accepted Solution

by:
sybe earned 280 total points
ID: 1845056
Thanks mendelsohn
0
 

Expert Comment

by:kessyclown
ID: 1845057
couldn't you do it the other way around? Instead of making from a gif a button, make the gif a background for the grey button?
That's a lot easier I think
0

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

Suggested Solutions

Title # Comments Views Activity
BG appearing and then disappaear after a second 8 58
PHP Command to Open New Tab/Page using Window.Open 3 33
Anchor Bookmark 6 33
SSL unsecure page mystery 17 45
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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