An image as a form element.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

An image as a form element.

Post by JellyFish »

Hey. Is it actually possible to make it to where, when you click on an image it brings up a file browser dialog, to upload an image? Hopefully I'm making myself clear on this. But I don't know what to call input element with the type of file.

Basically I'm building an image upload form on my site. And I'd the user to be able to click the image to select an image file on his/her system, then submit the form and doy doy...

So is it possible with a bit of css hacking or something of that nature?

Thank you for reading my ridiculous post, and I also apologize for it being so ridiculous. :D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

you could use a little javascript jiggery to do that: have a click event on an image trigger the click event of a file selector maybe?

maybe you can set the background image of the file button with CSS?

The trick would be figuring out how to distinguish between the button and the text box of the file form control. Anyone ever done this?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Kieran Huggins wrote:you could use a little javascript jiggery to do that: have a click event on an image trigger the click event of a file selector maybe?

maybe you can set the background image of the file button with CSS?

The trick would be figuring out how to distinguish between the button and the text box of the file form control. Anyone ever done this?
How about a div wrapped around the input element. The input element position relativity. The div with a mouse over event, positioning the input element in front of the mouse. The input element opacity to zero.

It's not as simple as it sounds, I tried it but didn't succeed.
Post Reply