New Image Extensions

Alignment

Sizing

Spacing

Borders
Space Buffers
Line Breaking
Back to the index

Alignment

<IMG ALIGN=LEFT SRC="image">
Default text position is even with the top of the image. There seems to be no way to use ALIGN to dictate both the image position and the text position in Netscape 1.1N.

<IMG ALIGN=RIGHT SRC="image">
Image is flush right. Both ALIGN=LEFT and ALIGN=RIGHT allow display of wrapped text next to the image.

<CENTER> <IMG SRC="image"> This is the way to center your images. This is the same CENTER tag used for centering text. </CENTER>

<IMG ALIGN=TEXTTOP SRC="image">
Top of text is aligned with top of the image. There seems to be no way to have text wrap next to the image.

<IMG ALIGN=MIDDLE SRC="image">
Base of the text is aligned with the middle of the image.

<IMG ALIGN=ABSMIDDLE SRC="image">
This is supposed to align the middle of the text with the middle of the image. Netscape1.1N doesn't seem to support this tag, and interprets ABSMIDDLE as MIDDLE.

<IMG ALIGN=BASELINE SRC="image">
Base line of the text is aligned with the bottom of the image.

<IMG ALIGN=BOTTOM SRC="image">
Identical to BASELINE, who knows why they support two identical alignment flags?

<IMG ALIGN=ABSBOTTOM SRC="image">
Bottom of the text is aligned with the bottom of the image. Netscape 1.1N doesn't seem to support this tag, and interprets ABSBOTTOM as BOTTOM.

Back to the top

Sizing

Width and height tags are supposed to help speed up display. The idea is that if size is predetermined, the viewer will not have to wait for the image to be loaded and image size calculated.

<IMG WIDTH=30 HEIGHT=30 SRC="image"> <BR>

<IMG WIDTH=90 HEIGHT=60 SRC="image"> <BR>

Back to the top

Spacing

Borders

<IMG BORDER=15 SRC="image"> <BR>

<IMG BORDER=5 SRC="image"> <BR>

<IMG ALIGN=LEFT BORDER=0 SRC="image"> <BR>
If an image serves is also an anchor and the border is set to 0, the usual highlit hotlink color will not appear.
(I aligned this image left so the text would wrap.)

Back to the top


VSpace and HSpace Buffers

You may want an empty space border surrounding an inline image:
Without space:Default

With HSpace: <IMG HSPACE=3 SRC="image">

Add Vspace: <IMG VSPACE= 3 HSPACE=3 SRC="image">

Back to the top


Line Breaking

BR now has the optional tag CLEAR, used in positioning images in relation to other images. BR CLEAR moves the position for the next text or image down until you have a clear horizontal line.

<IMG ALIGN=LEFT SRC="image"> <BR>
Without using <BR CLEAR> the text will just do single line breaks <BR>
Like this.<BR>

<IMG ALIGN=LEFT SRC="image"> <BR>
But if you dont have much to say about an image and want to move on,
<BR CLEAR> will take you to a fresh line.

<BR CLEAR=LEFT> will move down vertically until the left margin is clear of images.

<BR CLEAR=RIGHT> will move down vertically until the right margin is clear of images.

<BR CLEAR=ALL> will move down vertically until both margins are clear of images.

Back to the top

Back to the index

Last updated 20 june 95 by katie