We help IT Professionals succeed at work.

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.

Watch Question

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.


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 for.....in 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"?

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 "..is 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:-


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.



Thank you for your help.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.