Using Images, Tables, and forms with Dreamweaver

I am trying to build a webpage and I am stuck. I have used Fireworks 4 to almost completely build the page however, I am stuck at one thing. I have created an image that includes some hot spots for links. The image runs the full width and height of the page. (979 X 614) On this image, I would like to create a form that uses specific parts of the image for the feilds and the submit button. I don't need to use the back ground image for the fields, but I would like to use one specific place on the image for the submit button. I have created the image in Fireworks and saved it as a .png file. I then exported it to Dreamweaver hoping I could place a TABLE on top of the image right where I want the submit location to be. This did not work as I have to use a table and when I try to insert a table, of course it won't insert ON TOP of the image....

What can I do? Any thoughts? I am willing to scrap the entire thing if I need to start over...
Any direction in this would be greatly appreciated.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Use CSS;
Click in the table;
At the bottom of the document window, click the <table> tag to select it
Show the CSS panel (window menu > css)
Click new rule + sign
Create a Tag selector and select Table
In the Background category, browse to select your background image.
This approach will not work. You cannot place form fields over an image and set the background of the field to transparent to let the image show through. You can use CSS to position your form and form inputs, however to have the background image in the background of an text input, you'll need to use a slice of the image set as a background of the input.

To tie the whole thing together, you need to slice the image up into a table so that each form element occupies it own table cell. CSS is then used to disguise the form inputs to fill their table cell and the corresponding slice set as its background. The imagemap link uses javascript to submit the form.

To get a working example, you'll need to post the image.
Matt_MercurioAuthor Commented:
OK...I gotcha..on the "slicing of the image" part. Actually I was just about to reply to GlennHarris when your (v2Media) response came in. AFter looking at Glenn's solution, I was able to create the CSS sheet and I was making some progress of defining the tables on the image. I found out that I would need to "SLICE" my image with Fireworks BEFORE I brought it into Dreamweaver. As I understand it, Fireworks will slice up my image which by the way, is 797 X 614, and then use those slices as the background image in each of the cells that I define in Dreamweaver. SO this leaves me with a NEW sort of question.... How do I tell fireworks WHERE to slice my image? What I mean to say is, I want to be able to DEFINE the slices and NOT let Fireworks do it for me.  Here is what I am looking the attached image, you will see the SuddenSupport "PANIC BUTTON." I am planning on putting 3 fields to the right of the button in the bare RED area to capture Name, Phone Number, and Email. Then I want to use the "WHITE CROSS" of the panic button to use as my SUBMIT button.

Is this "doable"?

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

v2 didn't read the question closely or they might have seen

 I don't need to use the back ground image for the fields

that said, it could be interpreted either way; I don't know fireworks so V2 is welcome to respond, but in photoshop we use ruler guides to slice images and then when we export we select user defined slices, not auto. I imagine its super similar in fireworks. GL
GlennHarris, "I don't need to use the back ground image for the fields" qualifys "I would like to create a form that uses specific parts of the image for the feilds and the submit button."

In this context, "I don't need" reads as " optional". I find your assumption regarding my comprehension annoying. Now that the image is up, it clear what the questioner has asked; no interpretation required. The portion of the image where the form goes is blank. This opens up a different kettle of fish. The solution just needs to use the panic button as a form submit image and the main image as a table background.

Matt_Mercurio, pls check the linked file for one solution:-

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Matt_MercurioAuthor Commented:
Thanks to both of you for this help. Eventhough both of your answers were correct, I awarded v2Media the points because he spent some time putting the form together. I do want to apologize if I was not too clear in my question with concerns to the background image for the form feilds. I really didn't mean to confuse anyone and I hope I cause any heated debates.

Thanks again to both of you.

Matt_MercurioAuthor Commented:
Thank you for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.