Tips & Tricks
Using Graphics

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 extension. 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.
<img src= "images/swdesign.gif">	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 an image. The src defines the location of the graphic within your web environment. In this case, the graphic is located in a sub-directory called images. 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:         <a href="tips.htm"><img src="images/swdesign.gif"></a> 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 this:         <a href="tips.htm">         <img src="images/swdesign.gif" border=0         alt="Back to the Tips Menu"> </a> Place your mouse over the lower SpringWolf Designs image and you'll see the 'alt' message appear.
This image has 2 hot spots       In PageMill the graphic 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 mapped. 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 page. 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. <MAP NAME="cross"> <AREA SHAPE="rect" COORDS="44,109,86,161" HREF="glossary.htm"> <AREA SHAPE="circle" COORDS="65,64,44" HREF="tips.htm#menu"> </MAP> <IMG SRC="../img/cross.gif" BORDER="0"    ALT="This one images links to 2 different pages."    USEMAP="#cross" ISMAP>
Animated Graphics	An animated graphic can come in many forms. The two most popular are: 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" speech. 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