mendelsohn
asked on
How do I make a 'gif image' a submit button?
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/s earch/quer yhit.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/que ryhit.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>
THE CODES
<form action="/scripts/samples/s
<input type="hidden" name="CiMaxRecordsPerPage"
<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/que
<table BORDER="0" width="15">
<tr>
<td >
<input type="text" size="6" maxlength="100" name="CiRestriction"value=
</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>
<input type="image" scr="image.gif">
Sorry, typo:
<input type="image" src="image.gif">
You can treat it like an image tag, so include width=".." height=".." border="0" etc.
<input type="image" src="image.gif">
You can treat it like an image tag, so include width=".." height=".." border="0" etc.
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.su bmit();">< 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
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.
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
<form action="/scripts/samples/s earch/quer yhit.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/que ryhit.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>
<input type="hidden" name="CiMaxRecordsPerPage"
<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/que
<table BORDER="0" width="15">
<tr>
<td >
<input type="text" size="6" maxlength="100" name="CiRestriction"value=
</td>
</tr>
<tr>
<td>
<input type="image" src="searchgo.gif" border="0" width="72" height="22">
</td>
</tr>
</form>
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.
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.
SYBE's answer looks perfect to me.. or is it just me..?
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.)
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.)
Why did you reject my answer?
ASKER
Sybe's responded first with the right answer and ahould get the points.
ASKER
Sybe - repost an answer and I will give you the points - sorry about the problems and thanx for your help.
Good move mendelsohn!
-Josh
-Josh
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
- Matt
ps. give Sybe the points though
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
That's a lot easier I think