Image Tags Examples

Image Tags Examples

Borders
Fixed Backgrounds
Height & Width
Hspace
Image Map (Client-Side)

Linked
Rollover (JavaScript)
Text between 2 images
Two SRC's in one tag (External Link)
Vspace

BORDERS

Default border of 0:
<IMG SRC="redball.gif" ALT="*">
Border="1":
<IMG BORDER="1" SRC="redball.gif" ALT="*">
Border="5":
<IMG BORDER="5" SRC="redball.gif" ALT="*">
Changing color of border

<FONT COLOR="green"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></FONT>

Table of Contents

FIXED BACKGROUND

Example code #1:
<BODY BACKGROUND="bfly4.gif" BGPROPERTIES="fixed">
Result of code: the following link will take you to a test page with the above example code for its body tag.
Fixed background text page.
Doesn't work in Firefox

Table of Contents
Example code #2:
Place in <head> section: <style type="text/css">  </style>
<BODY BACKGROUND="images/clouds.jpg">
Of course, if you want to use an external style sheet, and want to apply the same style to all pages, including the same background image, place the CSS above into an external style sheet and add the following to the BODYstyles: background-image : url(images/clouds.jpg); -->
Result of code: the following link will take you to a test page with the above example code for its body tag.
Fixed background text page.

Table of Contents

HEIGHT & WIDTH

Default:
Unaltered size of redball.gif is 14 x 16 (width x height)
<IMG SRC="redball.gif" ALT="*">
HEIGHT="32":
<IMG SRC="redball.gif" HEIGHT="32" ALT="*">
WIDTH="28":
<IMG SRC="redball.gif" WIDTH="28" ALT="*">
HEIGHT="16" WIDTH="28":
<IMG SRC="redball.gif" HEIGHT="16" WIDTH="28" ALT="*">

Table of Contents

Image Map

Example Code Result of code

<MAP NAME="example">
<AREA SHAPE=RECT COORDS="165,0,320,69" HREF="#TOC">
<AREA SHAPE=CIRCLE COORDS="202,139,71" HREF="index.htm">
<AREA SHAPE=POLY COORDS="42,27,0,123,1,183,4,182,21,208,22,208,52,208,52,208,42,30" HREF="#TOC">
<AREA SHAPE=RECT COORDS="59,0,130,210" HREF="dblimage.htm">
</MAP>
<P>
<IMG BORDER="0" SRC="flowrs.gif" WIDTH="320" HEIGHT="240" USEMAP="#example">

Example Code	Result of code
<MAP NAME="example"> <AREA SHAPE=RECT COORDS="165,0,320,69" HREF="#TOC"> <AREA SHAPE=CIRCLE COORDS="202,139,71" HREF="index.htm"> <AREA SHAPE=POLY COORDS="42,27,0,123,1,183,4,182,21,208,22,208,52,208,52,208,42,30" HREF="#TOC"> <AREA SHAPE=RECT COORDS="59,0,130,210" HREF="dblimage.htm"> </MAP> <P> <IMG BORDER="0" SRC="flowrs.gif" WIDTH="320" HEIGHT="240" USEMAP="#example">

Table of Contents

HSPACE

Example Code Result of example code

Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="20">following text. Preceeding textfollowing text.

Example Code Result of example code

Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="40">following text. Preceeding textfollowing text.

Example Code	Result of example code
Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="20">following text.	Preceeding textfollowing text.
Example Code	Result of example code
Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="40">following text.	Preceeding textfollowing text.

Table of Contents

LINKED
(Clicking on the images will send you to the top of this page.)

Linked In-line image with border="0":
<A HREF="#TOC"><IMG BORDER="0" SRC="redball.gif" ALT="*"></A>
Linked In-line image (with default border of 1)
<A HREF="#TOC"><IMG SRC="redball.gif" ALT="TOC"></A>
Linked In-line image with border="5"
<A HREF="#TOC"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></A>
Changing color of border
Note: you may have to hit reload, as the below coding affects link color but not visited link color.
<A HREF="#TOC"><FONT COLOR="green"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></FONT></A>

Table of Contents

ROLLOVER
(JavaScript)

Position cursor over image to initiate rollover

Table of Contents

TEXT BETWEEN 2 IMAGES

<CENTER>
<IMAGE ALIGN="LEFT" VALIGN="MIDDLE" SRC="redball.gif" ALT="*">
<IMAGE ALIGN="RIGHT" VALIGN="MIDDLE" SRC="redball.gif" ALT="*">
An example of centering text between two images.
</CENTER>

An Example of centering text between two images.

Table of Contents

VSPACE

Example Code Result of example code

First line of text.<BR>
<IMG SRC="redball.gif" ALT="*" VSPACE="20"><BR>
Second line of text. First line of text.

Second line of text.

Example Code Result of example code

First line of text.<BR>
<IMG SRC="redball.gif" ALT="*" VSPACE="40"><BR>
Second line of text. First line of text.

Second line of text.

Example Code	Result of example code
First line of text.<BR> <IMG SRC="redball.gif" ALT="*" VSPACE="20"><BR> Second line of text.	First line of text. Second line of text.
Example Code	Result of example code
First line of text.<BR> <IMG SRC="redball.gif" ALT="*" VSPACE="40"><BR> Second line of text.	First line of text. Second line of text.

Table of Contents