Finding and using graphics

Why graphics are a bit difficult

Graphics file formats

Color on the web

Color combinations

Image maps and graphics slicing

Transparencies

Animations

Backgrounds

Common problems 

Classes home

HTML Info home

Graphics

Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-graphics/
nvwillj@nvcc.edu

Image maps and graphic slicing

There are two ways to create links to parts of an image, rather than the whole image: image maps and graphic slicing.  Image maps are by far the easiest and most commonly used, but graphic slicing is a good technique to know.

Image maps

Image maps are easy to make in WYSIWYG HTML editors.  For the freeware editor AOLPress we are using for this class, instructions for making an image map are:

1. Put your graphic onto the AOLPress page you are working on
2. Double-click on the graphic to select (highlight it)
3. On the Element menu, select Image map
4. Use the square, circle, or polygonal tool to select the clickable area of the image.
5. Drag the tool to cover the image
6. Select the arrow and click on the image
7. Type in your link at the bottom
8. Repeat the process for other links. Be sure to select the arrow tool and type in a new link every time. Otherwise, all of your links will go to the same place.

Graphic slicing

The image below is actually four images pasted into a table coded for border, spacing, and padding values of zero and no links visible around the images.

Same everything, but with table borders and image links turned on:

	See how the image is sliced into components, with each whole component linked?

So what's best?

My understanding is that graphics slicing is a clever hack from the days when graphics were widely supported but not image-maps. Image maps are much easier to make and keep track of.  

Slicing might be worth considering if

• components of your main graphic are to serve as navigation markers in your text
• you have a very large main graphic and you don't want users to have to wait for the whole thing
• you want to combine HTML text and graphics, or you want to use an image that is part photograph (ideal for JPEG format) and part illustration (better compressed as a GIF)

Note: Increasingly more programs support graphics slicing. Macromedia Fireworks is the most-mentioned one. Two cheaper ones that I've used are

PictureDicer (freeware) - members.tripod.com/~ShoeStringProjects/dicer01.htm

SPGWebTools ($59) - Dicing and image optimization Photoshop plug-in (also works with PaintShop Pro) www.spg-net.com