Beyond HTML Goodies
August 23, 2002
|
Go beyond the basics and learn how the pros add and use dynamic HTML
features and advanced JavaScript techniques. Beyond HTML Goodies
demonstrates dozens of new and different features readers can add
to their existing Web pages using HTML and JavaScript. The book
starts with simple text and image tips, such as adding a clock to a
Web page or causing text to appear when the mouse moves over an
image. It gradually builds to more complex tricks, including
manipulating forms or working with cookies behind the scenes.
Throughout the book, readers enjoy Joe's snappy style and "to
the point" discussion of each "goody" in the book.
|
Chapter 3
Neat Stuff with Text and Images
After you've mastered the advanced tricks with text and images
alone, you can move on to manipulating them together. This chapter
contains the following tutorials to help you dazzle your audience:
- Placing Text Over Images
- RevealTrans Filter
- Internet Explorer Text and Image Filters
- Internet Explorer Wave Filters
- Toggling Images and Text in Internet Explorer
- Toggling Netscape's Layers
Placing Text Over Images
Now and again I wonder if people are reading all the stuff I write.
When I put up the last FAQ page at HTML Goodies, I answered a
question from a reader about putting text over an image. She
wanted to be able to put the name of the person in the picture
on top of the picture, like a caption. I said that it couldn't
be done without the use of a graphics editor. Well, KaBoom!
The email poured in.
You can find this tutorial, and all of its examples, online at
http://www.htmlgoodies.com/tutors/textonimages.html.
You can download just the examples at
http://www.htmlgoodies.com/wpg/.
Yes, people are reading. I will take the weasel road right now and
say that when I answered the question, it was correct. Now the
variables have changed right out from under me, and the version
4.0 browsers have offered a few different ways to do it. In this
section, I'll outline three.
The Easiest Way I Know
Here you go. Figure 3.1 shows text over a stunning image of yours
truly.
Hey, he's cute!
Like the haircut? Most of the top is gone, as well as most of the
beard. I thought about getting a new character for the home page,
but I still like the old one. Besides, as of the writing of this
book, I'm back to a full head of hair and full beard. I go for
the "mountain man" look once every couple of years.
Here is the code that created the caption:
<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>
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.
- <TD WIDTH="221"
HEIGHT="300"
BACKGROUND="newjoe01.jpg"
VALIGN="bottom"> -
This is what does the trick. I set the image in Figure 3.1 as the
background of the image cell. Note that I added the height and
width of the image. You need to do that. If you don't, 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 appears on the image. I used a FONT size
and color command to get the text to show up a little better.
- </TR>-This ends the table row.
- </TABLE>-This ends the whole deal.
Doing It Through Layers - Page 2
|
