Form in an Image ?

[d0minus]

I have a good basic knowledge of HTML and java but I am unsure if this is possible.

If I have an image, can I make a form within that image. Or do I need to do it the other way around? I have an image with a white rectanglular box and I would like to allow anyone viewing this image on my site to enter text and then submit it with another part of that image. I know I can use image maps to make part of the image clickable, but can I do this more professionally with a form? Or am I completely dumb?

[JPnyc]

Not sure exactly what you're after. You want to have this image as the background behind the text boxes? Or you want no textboxes at all?

[d0minus]

Is there a way to make a piece of an image into a text box? Or yeah a background image would probably be perfect.

[JPnyc]

You could put a div around the form, then give the div a background-image.

[d0minus]

Div?

[NogDog]

Div?
http://www.w3.org/TR/html4/struct/global.html#edef-DIV

[codemaul]

...or do it in Flash.


Visit me at the coder's art (http://www.codersart.com)

[d0minus]

Let's just say I had a .jpg that was like the shape of a banner. And I wanted to put this .jpg on my site and let the browsers click on a whitespace in that .jpg and allow text input. Should I just make a banner and stop fooling with this roundabout method?

[codemaul]

You can't make an image behave like a textbox. Here's what you want to do: create a <div> (or you could use <table>) the size of the area you want to cover. Set the background image of the div to use the image you want. Within the div, put a form with a textbox inside. Something like this:<div style="width:150px;height:150px;background-image:url(path/to/your/image);background-repeat:no-repeat;">
<form action="somepage.html" method="post">
<input type="text" id="foo">
</form>
</div>

or you could accomplish this in Flash, as I mentioned before.
____________________________
Visit me at the coder's art (http://www.codersart.com)

[d0minus]

Where and what do I use to relocate the text box somewhere else than the top left corner of the image ?

[codemaul]

Change the textbox to
<input type="text" id="foo" style="postition:relative;left:50px;top:90px;">

This will put the textbox 50 pixels from the left edge of the div, and 90 pixels from the top edge of the div.
__________________________
Visit me at the coder's art (http://www.codersart.com)

[d0minus]

Thank you codemaul. You are a massive help. Can I do this:

<form action="mailto:johnsmith@yourisp.net" >

And have what the user entered into the text box sent to me? Or does that just open up a blank outlook message?

[codemaul]

Yes, that will work, but there are some downsides to it. Your email address becomes public (you'll eventually start getting spam as a result), and the format of the email isn't very good. But yes - it's a valid way to do it.
____________________________
Visit me at the coder's art. (http://www.codersart.com)

[d0minus]

But will that not just open a blank email from their default email program? How can I code the div to post the information in the text box and send it to me in an email? I wonder if thats possible.

[codemaul]

It's hard to say. It really depends upon the user's setup, which is why this method generally isn't used. You really need a server-side script to take care of this. Most web hosting companies have some built-in scripts for this purpose that are easy to use. You might check that out.

____________________________
Visit me at the coder's art. (http://www.codersart.com)