Image Browse Button

Hello,

Is there a way to make the browse button an image?

Thanks,
Miguel

shapper wrote:

Is there a way to make the browse button an image?

Two easy ways:

<INPUT TYPE=IMAGE SRC=smiley.gif onClick="alert('Ouch! My nose!')">
<P>
<BUTTON onClick="alert('You clicked the button')">Click: <IMG
SRC=/smiley.gif></BUTTON>

They both have drawbacks, if you plan to submit the form, and not just
use onClick events as I have above:

1. The <INPUT TYPE=TEXT> generates X and Y co-ordinates within the
image. Whatever handles the form has to know what to do with these
2. The <BUTTON> sends some very non-standard form data if the browser is
Internet Explorer. Easier to rely only on the NAME of the button
(which I didn't include above).

You can see this page working at http://swiftys.org.uk/image.html

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

On Sun, 26 Aug 2007 02:42:35 +0200, Ben Bacarisse <ben.usenet (AT) bsb (DOT) me.uk>
wrote:

Steve Swift <Steve.J.Swift (AT) gmail (DOT) com> writes:

shapper wrote:
Is there a way to make the browse button an image?

Two easy ways:

INPUT TYPE=IMAGE SRC=smiley.gif onClick="alert('Ouch! My nose!')"
P
BUTTON onClick="alert('You clicked the button')">Click: <IMG
SRC=/smiley.gif></BUTTON

I think the OP wants to know how to style the button that often
accompanies <input type=file>.

If that's the question: no, it cannot be done. You cannot style the
'browse' button reliably.
--
Rik Wasmus

On Aug 26, 3:50 am, Rik <luiheidsgoe... (AT) hotmail (DOT) com> wrote:

On Sun, 26 Aug 2007 02:42:35 +0200, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk
wrote:

Steve Swift <Steve.J.Sw... (AT) gmail (DOT) com> writes:

shapper wrote:
Is there a way to make the browse button an image?

Two easy ways:

INPUT TYPE=IMAGE SRC=smiley.gif onClick="alert('Ouch! My nose!')"
P
BUTTON onClick="alert('You clicked the button')">Click: <IMG
SRC=/smiley.gif></BUTTON

I think the OP wants to know how to style the button that often
accompanies <input type=file>.

If that's the question: no, it cannot be done. You cannot style the
'browse' button reliably.
--
Rik Wasmus

Yes, I want to style the button that accompanies <input type=file>.

I have seen this one or twice and it seemed to work fine ...

Any idea?

Thanks,
Miguel

On Aug 26, 3:50 am, Rik <luiheidsgoe... (AT) hotmail (DOT) com> wrote:

On Sun, 26 Aug 2007 02:42:35 +0200, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk
wrote:

Steve Swift <Steve.J.Sw... (AT) gmail (DOT) com> writes:

shapper wrote:
Is there a way to make the browse button an image?

Two easy ways:

INPUT TYPE=IMAGE SRC=smiley.gif onClick="alert('Ouch! My nose!')"
P
BUTTON onClick="alert('You clicked the button')">Click: <IMG
SRC=/smiley.gif></BUTTON

I think the OP wants to know how to style the button that often
accompanies <input type=file>.

If that's the question: no, it cannot be done. You cannot style the
'browse' button reliably.
--
Rik Wasmus

Hi,

Here is an ASP.NET control that does just that:

http://www.telerik.com/demos/aspnet/...DefaultCS.aspx

A few demos:
http://www.telerik.com/demos/aspnet/...DefaultCS.aspx
http://www.telerik.com/demos/aspnet/...DefaultCS.aspx

This seems to work fine.

How is this done? Any idea?

Thanks,
Miguel

..oO(shapper)

Yes, I want to style the button that accompanies <input type=file>.

There's no reliable way to do that.

I have seen this one or twice and it seemed to work fine ...

Most likely an ugly JavaScript hack.

Micha

"shapper" <mdmoura (AT) gmail (DOT) com> wrote

On Aug 26, 3:50 am, Rik <luiheidsgoe... (AT) hotmail (DOT) com> wrote:
On Sun, 26 Aug 2007 02:42:35 +0200, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk
wrote:

Steve Swift <Steve.J.Sw... (AT) gmail (DOT) com> writes:

shapper wrote:
Is there a way to make the browse button an image?

Two easy ways:

INPUT TYPE=IMAGE SRC=smiley.gif onClick="alert('Ouch! My nose!')"
P
BUTTON onClick="alert('You clicked the button')">Click: <IMG
SRC=/smiley.gif></BUTTON

I think the OP wants to know how to style the button that often
accompanies <input type=file>.

If that's the question: no, it cannot be done. You cannot style the
'browse' button reliably.
--
Rik Wasmus

Hi,

Here is an ASP.NET control that does just that:

http://www.telerik.com/demos/aspnet/...DefaultCS.aspx

A few demos:
http://www.telerik.com/demos/aspnet/...DefaultCS.aspx
http://www.telerik.com/demos/aspnet/...DefaultCS.aspx

This seems to work fine.

Nope. They don't work fine.

How is this done? Any idea?

They are overlaying (z-index) a normal <input type=file> with an <input
type=text> and an <input type=button> and styling the button. They are not
styling the <input type=file> button which is, of course, generated by the
browser.

I didn't research the javascript skulduggery that must be going on behind
the scenes.

--
Richard.