|
| There are all sorts of images for web pages, but I'll just stick to the most used types which are, GIF and JPG. For GIFs there are four basic types, regular, transparent, interlaced and animated. For JPGs there are regular and progressive.
|
Image name "simple.gif"
File size is 934 bytes.
|
On the left is a simple GIF image, and on the right is a JPG image. Both were created from the same Paint Shop Pro file. You can see that the GIF is much smaller than the JPG. |
Image name "simple.jpg"
File size is 7,283 bytes. |
Image name "complex.gif"
File size is 10,177 bytes.
|
This time we are using images with many colors. You can see that in order to retain quality, the GIF image is over twice the size as the JPG image. |
Image name "complex.jpg"
File size is 3,980 bytes.
|
Bottom line is: Be sure you select the image type, GIF or JPG, best suited for the job.
Just remember that image file size has an effect on page load time. |
Well, that's enough about simple graphics, what I really want to talk about are Image Maps & Navigation Maps.
Not too long ago Image Maps were difficult and time consuming to create. All of the necessary coordinates had to be calculated and entered manually. Today most HTML editors provide a built in image map creation tool.
The simple image below is an image map, which is a single JPG image. Each pool ball will direct you to a really ugly page with the corresponding numbered ball on it as a link back here.
This is a navigation map, it is what has replaced
the type of image map above. It consists of
a table with each cell containing an image,
and an alternate image for the onMouseOver event.
There is a better explanation of this type of map in the Java
Tutor section of the JavaScript page.
You can also look at the source code for this (or any) page by clicking
on View>Source in your browsers tool bar.
The difference between the two examples here are obvious when you move the mouse pointer over them. Notice that each section of the lower image changes when your mouse pointer is placed over it. For each of the balls there are two images, that means that there are a total of eight images are used in this map as opposed to just one in the first example.
Highway 56.com - A Not For Profit Organization
Page created by
|
