asked on

Adding HTML Textboxes on a JPEG

I there a way to place html textboxes on top of a square jpeg? I am creating a form to hold various controls (buttons, textboxes, checkboxes, etc) and I trying to use images to give a tab panel look. Someone had recommended using images and placing the controls directly on the image (tab). I am just not sure how to do it. Eventually, I will create separate jpegs for the actual tabs and whatever tab they select, will take them to the appropriate pane to fill out data.

Thanks,

KP

ASKER CERTIFIED SOLUTION

andriv

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kpetti

ASKER

Thank you very much for your help. It worked just fine.

Thanks,

KP

Baobab

You could use layers to do what you intend to do.
<STYLE type="text/css">
div.layer1 {position:absolute; top:100px; left:60px;}
div.layer2 {position:absolute; top:50px; left:100px;}
......
</STYLE>
......
<DIV ID="layer1><IMG SRC=.......
.....</DIV>
<DIV ID="layer2>......<INPUT TYPE=.......
.....</DIV>
The two layers will overlap so you can have an image mixed with whatever anywhere on the page (theoretically). Play with the 'top' and 'left' attributes in order to get the positioning right.

B.

andriv

Do you use my suggestion?

kpetti

ASKER

Andriv, I did use your suggestion, however, are there any advantages to setting the img src of the div tags that I am not seeing.

KP

andriv

I rarely use div tags so I wouldn't know the answer to weather there are advantages to setting the img src of the div tag. Sorry:(

DreamMaster

well...one thing's for sure...andriv's solution won't work in Netscape..as netscape doesn't support background images in a table..using a div could work though..

<div id="image" style="position:absolute; left:100px; top:100px; z-index:0">
<img src="yourimage.gif">
</div>

now You can put a div right over that..like this:

<div id="textboxes" style="position:absolute: left:110px; top:110px; z-index:1">
<table border=0 cellspacing=0 cellpadding=2>
<form>
<tr>
<td><input type="textbox" name="text1"></td>
<td><input type="textbox" name="text2"></td>
</tr>
</form>
</table>
</div>

The form tags are there to display the formfields in Netscape...i hope this helps!

Max Davidse
http://www.thekitchen.nl

andriv

Max, what version of netscape are you speaking of when you say background not allowed in tables. I have no problem using images as background in Netscape.

kpetti

ASKER

Hi,

This is for a our corporate intranet and our standard is IE 4.01 so I don't have to worry about Netscape. Thank you though for suggestion.

KP

DreamMaster

if that is so...andriv has helped You allready and should be awarded the points given with this question...

Andriv > td background="image" doesn't work in multiple versions of NS4....i don't know a specific version, but i tried it multiple times...

kpetti

ASKER

Thank you everyone for your help.

KP

DreamMaster

andriv >
That must have been Your easiest sollution so far...lol...

kpetti >
i just try to be helpfull....