want to display come text on the image

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
lokesh_kumar_s
Forum Commoner
Posts: 48
Joined: Mon Apr 13, 2009 5:39 am
Contact:

want to display come text on the image

Post by lokesh_kumar_s »

hi i want display some text right on top of image using Javascript or php. can you please help me.
i want to display text on top image like this.
Attachments
Passport3.jpg
Passport3.jpg (17.03 KiB) Viewed 340 times
lokesh_kumar_s
Forum Commoner
Posts: 48
Joined: Mon Apr 13, 2009 5:39 am
Contact:

Re: want to display come text on the image

Post by lokesh_kumar_s »

The Code That Did It
<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>

<TD WIDTH="221" HEIGHT="300" BACKGROUND="newjoe01.jpg" VALIGN="bottom">

<FONT SIZE="+1" COLOR="yellow">Joe Burns at Work</FONT></TD>

</TR>
</TABLE>

Here's What's Happening

I got the effect using a single table cell, adding a background, and then some text. Like so:

* <TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> This is the format for the cell. You need to set everything to zero so that the cell borders lay right against the image. That way you have better control over the text in relation to the image.

* <TR> This starts the table row. It's not really needed but it's good table format.

* <TD WIDTH="221" HEIGHT="300" BACKGROUND="newjoe01.jpg" VALIGN="bottom"> This is what does the trick. I set the image you see above as the background of the image cell. Please note that I added the height and width of the image. YOU NEED TO DO THAT. If you don't, then the cell will only conform to the size of the text you put after the TD command. In other words, you won't see the entire picture.

* <FONT SIZE="+1" COLOR="yellow">Joe Burns at Work</FONT></TD> This is the text that will appear on the image. I used a FONT size and color command to get the text to show up a little better.

* </TR> Just good table creation again.

* </TABLE> That ends the whole deal.
Post Reply