Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

text input boxes over a graphic?

Posted on 2004-04-22
12
Medium Priority
?
737 Views
Last Modified: 2010-07-27
how can i create text boxes that people can type in if the whole page is a gif image that i created in imageready, how can i make a text input box over the graphic?

thanks
0
Comment
Question by:finnstone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +3
12 Comments
 
LVL 45

Expert Comment

by:sunnycoder
ID: 10896626
0
 

Author Comment

by:finnstone
ID: 10896903
sunnny, that is not what i am trying to do.

 i want a text BOX where people can input stuff and i want this to be a form input box .

sorry for confusion
0
 
LVL 45

Expert Comment

by:sunnycoder
ID: 10896975
I guess you are building some web page or something similar ...

In that case, you can consider setting your image as background of the page and creating a text box (form) on that page ... In other words, text box will not  be a part of the image (graphics) but just a component of your overall web page

If you are using html, you can use a WYSIWYG editor or other tools to design the page

check these links
http://skyscraper.fortunecity.com/raytrace/766/forms_tutorial.htm
http://www.echoecho.com/htmlforms.htm
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 30

Expert Comment

by:weed
ID: 10900893
You mean like http://www.artcenter.edu/home/index1b.html finnstone?
It's just a matter of slicing up the image, and leaving spaces for input fields in the tables.
0
 

Author Comment

by:finnstone
ID: 10901709
yes

what do u mean though. why is slicing have to do anythgn with this?

 what tables should i create? how can i create a table in the html page in the exact spot where the gif image lies?
0
 
LVL 30

Expert Comment

by:weed
ID: 10905040
Are you familiar with using Slices in ImageReady and Photoshop? If not, check out the manual pages which tell you what slices are, what they do, and how to use them. When you export to HTML, the slices will create tables which can be used as a layout tool for HTML. Use the tables, to place your forms.
0
 
LVL 16

Accepted Solution

by:
Kiran Paul VJ earned 800 total points
ID: 10907270
You can use a layer to place the text box exactly where you want.

In your web page put this tag in the body

<div id="Layer1" style="position:absolute; left:164px; top:101px; width:213px; height:30px; z-index:1">
  <input type="text" name="textfield">
</div>

You can adjust the top, left, width, height etc to suit ur needs.
(Here the textbox is placed inside a layer)

If you are using a web page editor like Dreamweaver or Frontpage things will be more easy, just click the layer and move to where you want to place the text box.

The advantage of using layers is that you can place the layer anywhere in your webpage.

So you put your image in a table. And on top of this table you place the layer( the place where u want to place the textbox);

hope this helps...
thank u.
kiranvj
0
 
LVL 5

Assisted Solution

by:bitter_chicken
bitter_chicken earned 800 total points
ID: 10916661
The textfields will work, but you wont be able to see through to the image underneath.

The following will allow the user to add text on top of the image, and still see the image: (IE)

==========================

<div id="Layer1" contentEditable="true" style="position:absolute; left:71px; top:61px; z-index:1; width: 500px; height: 500px; border: 1px dotted #336699; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#990000;">
  <br> Content Here
  <br> Type Stuff Here
  <br> Add Text Here
</div>

==========================

bc :-)
0
 
LVL 45

Expert Comment

by:sunnycoder
ID: 10916713
>how can i create a table in the html page in the exact spot where the gif image lies?
Use a WYSIWYG (what you see is what you get) html editor like MS frontpage and your task will get considerably easier
0
 
LVL 2

Assisted Solution

by:Lance_Frisbee
Lance_Frisbee earned 400 total points
ID: 10921819
To get the result you want, you'll need to slice your image into multiple slices. When you optimize as webpage AFTER going through imageready, you'll need to open your .html file with an editor of some sort. You'll have a bunch of table cells that were created by your slices

<TD Colspan = 8>
                           <img src="images/picture.gif" height="100%" width="100%" border="0">
</TD>


This is the kind of stuff you'll be seeing. To make it so you can type on top of one of these images using your HTML editor i.e. Dreamweaver, Frontpage etc. you need to change this table cell from containing an image of "picture.gif" and make the BACKGROUND image of the cell "picture.gif"

To obtain this effect you'll need to change your code to read:

<TD Colspan=8 background="images/picture.gif" height="100%" width="100%" border="0">
           This is where you'll write your text that will appear ON TOP of the image.
</TD>

So to sum it up - replace your img src= with background= and make it all part of the same <TD> tag.

Hope this helps -

Lance
0
 

Author Comment

by:finnstone
ID: 11331931
i was wondering too...how can i make this a form??
0
 

Author Comment

by:finnstone
ID: 11331934
would the form tag go before the text input and after the div tag?
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…
Suggested Courses

610 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