images as buttons 3

[frogggg]

This is a very beginner question:
How do you set an image to be displayed instead of a regular button, like a submit?
Thanks!

 

[NiteCrawlr]

<input type=&quot;image&quot; src=&quot;yourimage.gif&quot;>

 

[frogggg]

What if it is a submit button?
<input type=submit>

Thanks.

 

[xutopia]

well the <input type=image> acts just like a submit button.

If you want to have a simple image that isn't a form element but just a design element of your page then use this type of image tag :

<img src=myimage.gif border=0>

Hope that helps. Gary

http://www.xutopia.com

Haran

 

[frogggg]

Thanks. One more question.
What about
<input type=file>
?

Thanks again.

 

[tsdragon]

That creates an input field and a &quot;browse&quot; button so you can select a file to upload. Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[frogggg]

I know that. How do you have the Browse... button be an image?

 

[frogggg]

Ditto for <input type=&quot;reset&quot;>.

How do I have the button be an image?

Thanks.

 

[Einstein47]

Reset Button
You can use the following to be an image to reset your form:

<a href=&quot;javascript:document.form[0].reset;&quot;><img src=&quot;reset.gif&quot; border=&quot;0&quot;></a>

Just replace the 0 with the name of your form, in case there are multiple forms on the page.

I don't know of a way to do that with the TYPE=&quot;file&quot;. Sorry. Einstein47
(Love is like PI - natural, irrational, endless, and very important.)

 

[tsdragon]

I suppose you could use an input type=image with an onClick handler. Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[xutopia]

To answer your question about browser button as image...

no you can't use an image for the browser button. However I recommend the usage of CSS.

Try something like this :

<style>
.browse
{
border: 1px solid black;
background-color: Teal;
color : white ;
}
</style>

<input type=file class=browse>

I hope this helps. Gary

http://www.xutopia.com

Haran

 

[Wullie]

Hi,

Just found this,

<b><i>Filename:</i></b>
<input type=file
name='file1'
size='15'
class='walter'
style='display: none;'>
<br>

<input type='text'
name='file2'
id='file2'>

<img src='images/browse-up.gif'
name='brower'
id='brower'
width='83' height='24' border='0'
alt=''
align='absmiddle'
onclick='document.all.file1.click();

document.all.file2.value=document.all.file1.value'
onMouseDown='this.src=&quot;images/browse-dn.gif&quot;'
onMouseUp='this.src=&quot;images/browse-up.gif&quot;'
onMouseOut='this.src=&quot;images/browse-up.gif&quot;'>

It's a bit more complicated but it does the job

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[Wullie]

Sorry, I mean't to post the source..

http://www.faqts.com/knowledge_base/view.phtml/aid/6003

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

 

[frogggg]

Thanks everyone.
Wullie,
If I don't mind if the button doesn't pop down when I click it, can I skip the onMouseUp, etc. Also, I'm still pretty new to this - what is
onclick='document.all.file1.click();

document.all.file2.value=document.all.file1.value'

this for?

Thanks.

 

[Einstein47]

WOW!!!

That is really slick wullie!

frogggg,
the part you asked about causes a click on the image to fire the onclick of the hidden <input type=file>. Then it sets the value of file2 = file1, because if the input box is hidden it may not be part of the form data when the submit is clicked.
Einstein47
(Love is like PI - natural, irrational, endless, and very important.)

 

[frogggg]

Thanks everyone agian.
I seem to be having some trouble, though.
The image is squashed and doesn't look like it's supposed to. I just copied and pasted your code, Wullie, and since I didn't have two images, I just put the source for the one for all of them. Was that where I went wrong? Or is there something else?
Thanks again.

 

[MMage]

You can unsquish your image by replacing the width and height attribute values in the image tag with the height and width values of your image.

If you are only using one image you should be able to get rid of the onMouseDown, onMouseUp, and onMouseOut handlers, they are used to replace the image based on user actions.

Be sure to leave onClick however because that set the file input field its value.