?
Solved

Adding HTML Textboxes on a JPEG

Posted on 2000-01-10
12
Medium Priority
?
276 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:kpetti
  • 4
  • 4
  • 3
  • +1
12 Comments
 
LVL 5

Accepted Solution

by:
andriv earned 200 total points
ID: 2339230
If the images are arranged in a table you can try making the images the <td background="image.jpeg">
0
 

Author Comment

by:kpetti
ID: 2339316
Thank you very much for your help.  It worked just fine.

Thanks,

KP
0
 

Expert Comment

by:Baobab
ID: 2339322
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 5

Expert Comment

by:andriv
ID: 2339336
Do you use my suggestion?
0
 

Author Comment

by:kpetti
ID: 2339348
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
 
LVL 5

Expert Comment

by:andriv
ID: 2339411
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
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2340724
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
 
LVL 5

Expert Comment

by:andriv
ID: 2342094
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
 

Author Comment

by:kpetti
ID: 2342393
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
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2344201
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
 

Author Comment

by:kpetti
ID: 2345119
Thank you everyone for your help.

KP
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2345145
andriv >
That must have been Your easiest sollution so far...lol...

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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question