dynamic labels over a chart in gif format

What is the best method & code for displaying text over a Bar chart  (in gif or jpg format) on a web page that is entered by the user.  The gif file stays the same, however the label at the top and bottom of the chart (gif file) change when the user enters the text and presses a submit button. They can then print out the same chart with different titles? code examples? website examples?
 
rickwinterkornAsked:
Who is Participating?
 
rafisternConnect With a Mentor Commented:
This should do the trick:

<body>
<img src="graph.gif" width=200 height=200>
<div style="position:relative;top:-180;left:20;z-index:2">
<form>
<input type=text name="title" size=20>
</form>
</div>
</body>

It works like this. The <div> tag wraps the <input> field. it is placed in a layer over the gif using z-index. Its position (top left corner) is set as "relative" to the end of the gif where it appears in the code by -180 pixels up and 20 pixels right.
0
 
rafisternCommented:
You can do this in IE4/NS4. Is this good enough?
0
 
rafisternCommented:
For other browsers you would have to use a <input type=text>. This would give you unformatted text.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
cheekycjCommented:
yup....
using JavaScript and form boxes (around your bar chart) should do the trick

CJ
0
 
rickwinterkornAuthor Commented:
the text will appear "over" a portion of the graphic using your recommendatons? I really need the text to be super-imposed over the text instead of above, below, left, and right. Is this possible by positioning the text in any way?
0
 
rafisternCommented:
This will work in both IE4 and NS4 only.
0
 
rickwinterkornAuthor Commented:
Rafistern, nice job - thanks, works great!  Any easy way to get rid of the borders in the text box?
0
 
rafisternCommented:
Here is a different and better way to do this:

<body>
<form>
<input type=text name="title" size=20>
<input type=button value="Update" onclick="document.all.t.innerHTML=document.forms[0].title.value">
</form>
<img src="graph.gif" width=200 height=200>
<div id="t" style="font-weight:bold;position:relative;top:-180;left:20;z-index:2">
</div>
</body>

You can put all kinds of formatting into the <div> tag. This is a lot better than the previous version I gave you.
0
 
rickwinterkornAuthor Commented:
Thanks again, this is excellent, works perfect
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.