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
kpettiAsked:
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.

andrivCommented:
If the images are arranged in a table you can try making the images the <td background="image.jpeg">
0

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
kpettiAuthor Commented:
Thank you very much for your help.  It worked just fine.

Thanks,

KP
0
BaobabCommented:
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.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

andrivCommented:
Do you use my suggestion?
0
kpettiAuthor Commented:
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
0
andrivCommented:
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:(
0
DreamMasterCommented:
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
0
andrivCommented:
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.
0
kpettiAuthor Commented:
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
0
DreamMasterCommented:
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...
0
kpettiAuthor Commented:
Thank you everyone for your help.

KP
0
DreamMasterCommented:
andriv >
That must have been Your easiest sollution so far...lol...

kpetti > 
i just try to be helpfull....
0
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
HTML

From novice to tech pro — start learning today.