Graphics can add a lot of flair to your web site. Too many graphics
can also be a deterrent to visitors. The more graphics you have,
the longer your web page takes to load. Many web surfers do not
like to wait, and therefore they may cancel out of your page
or site and go some where else on the web. You must use your
own judgment to find that happy medium. But it can be done.
Jpegs & Gifs
There are two types of graphic files that can be used on a
web page. These file types are identified by their file name
- A .jpg extension is a jpeg file type. These files are large
in size because they contain a large number of pixel colors.
- A .gif extension is a CompuServe graphical format. These
files do not contain as many pixels as a jpg so they're not as
large in size. But, the smaller number of pixels can also mean
the loss of detail or clarity within a picture.
All HTML editing packages provide a feature for a 'click &
add' of graphics to a web page. The command to add a graphic
is very simple.
- The img tag tells the browser that the page is loading
- The src defines the location of the graphic within
your web environment.
- In this case, the graphic is located in a sub-directory called
- The name of the graphic is swdesign.gif
You can use a graphic like the one to the left to create a
link to another page within your web site. Or to someone else's
web page entirely. Within a html editor, you can usually click
on the graphic, then type the web address in some field the tool
provides. But the command will look like this:
You can add parameters to the command, to remove the 'blue
link' box that surrounds the image. You can also add a label
or notice to the graphic that will appear when a visitor places
their mouse pointer over the image. The command will look like
alt="Back to the Tips Menu">
Place your mouse over the lower SpringWolf Designs image and
you'll see the 'alt' message appear.
This image has
2 hot spots
looks like this.
An ImageMap is a graphic that has been formatted with "hot
spots". Hot spots allow you to use an image or different
parts of an image to link users to several different sections,
or pages of your site, or to someone else's web page entirely.
Creating an ImageMap isn't as hard as you might think. Many
of the new HTML editing packages automate this functionality
for you. An excellent example is Adobe's PageMill which creates
all the coordinate and html tag information for you. But it's
still a good idea to know how an image map is put together, in
case you want to change it a little or if you have maintenance
problems in the future.
The following is an example of a simple image map command
used for the graphic to the left.
- The first command tells the browser to load an image MAP
and defines the name for this mapping definition called CROSS.
- The next two commands defined the shape of the areas to be
- The rectangle coordinates are defined and the Hypertext REFerence
(or link) is also provided. So when you click on the lower part
of the graphic, You'll find a small rectangular hot spot. When
you click on this hot spot, you'll be linked to the Glossary
- Same thing for the circle hot spot. Except it goes to a different
page; back to the Tips & Tricks menu.
- The second part of an image map is the image itself. But
you'll notice a couple of additional parameters.
- Use map tells the browser which Mapping command to use for
this image. In this case the map is called Cross.
<AREA SHAPE="rect" COORDS="44,109,86,161"
<AREA SHAPE="circle" COORDS="65,64,44"
<IMG SRC="../img/cross.gif" BORDER="0"
one images links to 2 different pages."
An animated graphic can come in many forms. The two most popular
- An avi or movie file. In many cases, these types of files
require additional software or a browser plug in to view. They
are large in file size and are rarely used as a default or primary
graphic on a web page. Most people who use these types of files
create a link from a web page that describes what the movie file
is about. Then they leave it up to the visitor to load the file
or not. An example of using this type of file might be, a web
page concerning Civil Rights. A developer might provide a link
to an avi copy of Martin Luther King's "I have a dream"
- The most common animated graphic file is called a multi-part
gif, such as the one to the left. A multi-part gif is just what
it sounds like. Multiple images of something that when put together
in a single file looks like the image is moving. Remember when
you were a kid and you drew a picture of dog on a note pad. One
picture on each page, showing the legs of your dog in different
positions. Then you flipped through the pages real fast and the
dog looked like it was running? Well that is the same concept
behind a multi-part gif.
- You can find various software packages that help you create
these types of images. The current version of JASC's
PaintShop Pro includes a gif animator. Another easy to use
package is Ulead's Gif Animator.
An animated graphic can also be used as a link as described
above. To be honest I've never tried using an animation in an
image map. But I see no reason why it wouldn't work.
Next: Using Special Characters