View Full Version : text inside an image?


willworkforchoc
06-01-2003, 06:43 AM
I have an image of a chalkboard and I would like to put text onto
it. Is there an HTML code that will do that?

Thanks

pb&j
06-01-2003, 07:05 AM
perhaps put it as a background image in a table, td or div area, then add your text into the area like normal?

<div style="width:100px;height:100px;background-image:url(picturename.gif);">
text here
</div>

(adjust values as necessary)

sabrinastar
06-01-2003, 03:59 PM
you can make a table and have the chalkboard be the background. then place your text in it!

willworkforchoc
06-01-2003, 04:31 PM
I tried both the table and DIV. Neither worked. Here's what I wrote:

<table border="0"><tr><td background="chkbdsm.gif">Site Map</td></tr></table>

(This table will be inside a larger table)

and...

<div style="width:100px;height:100px;
background-image:url(chkbdsm.gif);">
Site Map
</div>

(Again this is in a table)

YellowYoshi
06-01-2003, 07:14 PM
Maybe this might work, but not sure:

<table><tr><td background="image here"><div style="position:absolute; left:0px; top:0px;">Site Map</div></td></tr></table>

Try it, and tell me if it did.

zangerbanger
06-01-2003, 07:24 PM
Another way would be to use a graphics program and put the text right on the graphic.

Lakini's Juice
06-01-2003, 10:49 PM
You can also use the span tag...and it works good see (http://simpleillusions.com/test/test.html). The text "Testing! Testing!" on that picture is html. Here is the code I used:

&lthtml&gt
&lthead&gt
&ltbody&gt

&ltp&gt&ltspan style="position: absolute; left: 165; top: 165"&gt&ltimg border="0" src="chalkboard.bmp"&gt&lt/span&gt&lt/p&gt

&ltp&gt&ltspan style="position: absolute; left: 180; top: 175"&gt&ltfont face="comic sans" size=4 color=white>Testing! Testing!&lt/a&gt&lt/span>&lt/p&gt

&lt/body&gt
&lt/html&gt


Just change the image name to the name of your image and then the text to your text. Also adjust the positions to get the text over your image where you want it. I wasn't sure how to do it myself so I ddi a test to see if I could figure it out.

PS- is there an easier way to put code in here then to change the &lt and &gt to & lt and & gt ??

willworkforchoc
06-02-2003, 12:11 AM
Okay...
I've tried everything and got success with the span tag (thanks Lakini's Juice and everyone) Now, I've never used a span tag. How do I center? This image is in my left.html and I would like it at the top.
[URL=http://www.geocities.com/laharold2003/URL]

Thanks

Lakini's Juice
06-02-2003, 12:21 AM
I'm not sure how or if you can center it with a span tag. probably can and someone else likely knows but I have another idea first I need to know do you want it at the top of the table with the writing or right at the very top of the page?

Lakini's Juice
06-02-2003, 12:25 AM
Here try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://www.geocities.com/laharold2003/left.html -->
<HTML><HEAD><TITLE>Site Map</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD>
<BODY background=left_files/purpdk1.gif>
<STYLE>BODY {
SCROLLBAR-BASE-COLOR: #a462b9
}
</STYLE>

<TABLE cellSpacing=0 cellPadding=20 bgColor=#cfb1d8 border=1 30% 1>
<TBODY>
<TR>
<TD>
<CENTER>
<P><SPAN style="LEFT: 33px; POSITION: absolute; TOP: 20px"><IMG
src="left_files/chkbdsm.gif" border=0></SPAN></P>
<P><SPAN style="LEFT: 80px; POSITION: absolute; TOP: 30px"><FONT
face="comic sans" color=white size=5>Site Map!</A></SPAN></P><FONT
face="comic sans ms" color=#000000 size=2><BR><BR><BR><BR><A
href="http://www.geocities.com/laharold2003/authorstud.html"
target=rightside><IMG src="left_files/medapp.gif" border=0>Author
Studies</A><BR><BR><A
href="http://www.geocities.com/laharold2003/cdnres.html"
target=rightside><IMG src="left_files/medapp2.gif" border=0>Canadian
Resources</A><BR><BR><A
href="http://www.geocities.com/laharold2003/schedule.html"
target=rightside><IMG src="left_files/medapp.gif" border=0>Class
Schedule</A><BR><BR><A
href="http://www.geocities.com/laharold2003/curriculum.html"
target=rightside><IMG src="left_files/medapp2.gif"
border=0>Curriculum</A><BR><BR><A
href="http://www.geocities.com/laharold2003/family.html"
target=rightside><IMG src="left_files/medapp.gif" border=0>Family and
Friends</A><BR><BR><A
href="http://www.geocities.com/laharold2003/games.html"
target=rightside><IMG src="left_files/medapp2.gif" border=0>Games for
Children</A><BR><BR><A
href="http://www.geocities.com/laharold2003/homework.html"
target=rightside><IMG src="left_files/medapp.gif"
border=0>Homework</A><BR><BR><A
href="http://www.geocities.com/laharold2003/intrntproj.html"
target=rightside><IMG src="left_files/medapp2.gif" border=0>Internet
Projects</A><BR><BR>Making Connections<BR><BR>Meet Miss Harold<BR><BR><A
href="http://www.geocities.com/laharold2003/month.html"
target=rightside>Month by Month</A><BR><BR>Penpals<BR><BR>Primary
Connections<BR><BR><A
href="http://www.geocities.com/laharold2003/books.html"
target=rightside>Read Alouds</A><BR><BR><A
title="Spelling into Reading is a systematic approach to teaching spelling for the

purpose of reading."
href="http://www.tkc.com/school/school-pages/spelling.html"
target=_blank>Spelling into Reading</A><BR><BR>Teacher Resources<BR><BR><A
title="The King's School is a private Christian K-12 school situated in Langley, BC

Canada. My is my class site for my parents."
href="http://www.thekingsschool.net/grade12" target=_blank>The King's
School</A><BR><BR>Website Credits<BR><BR>Workshop
Schedule<BR><BR></CENTER></FONT></TOP></FONT></TD></TR></TBODY></TABLE><!-- text

below generated by server. PLEASE REMOVE --></OBJECT></LAYER>
<DIV></DIV></SPAN></STYLE></NOSCRIPT></TABLE></SCRIPT></APPLET>
<SCRIPT
language=JavaScript>var PUpage="76001081"; var PUprop="geocities"; </SCRIPT>

<SCRIPT language=JavaScript src="left_files/pu5geo.js"></SCRIPT>

<SCRIPT language=JavaScript src="left_files/ygIELib9.js"></SCRIPT>

<SCRIPT language=JavaScript>yvSM=0;yvVP=0;var

yviContents='http://us.toto.geo.yahoo.com/toto?s=76001081&l=NE&b=1&t=1054512965';yviR='us'

;yfiEA(0);</SCRIPT>

<SCRIPT language=JavaScript src="left_files/mc.js"></SCRIPT>

<SCRIPT language=JavaScript src="left_files/geov2.js"></SCRIPT>

<SCRIPT language=javascript>geovisit();</SCRIPT>
<NOSCRIPT><IMG height=1 alt=setstats src="left_files/visit.gif" width=1
border=0></NOSCRIPT> <IMG height=1 alt=1 src="left_files/serv.gif" width=1>
</BODY></HTML>

willworkforchoc
06-02-2003, 01:07 AM
I adjusted your code abit. I did this:
<p><span style="position:absolute;left: 36px; top: 20px"><img border="0" src="chkbdsm.gif"></span></p>
<p><span style="position:absolute;left: 48px; top: 32px"><font face="comic sans" size=5 color=white>Site Map!</a></span></p>
Thanks so much!!! By the way, what is span?

Lakini's Juice
06-02-2003, 01:21 AM
your welcome! you'll likely find this funny but I really don't know. I think it's very similar to div layers.