Image slicing allows you to create regions in an image that respond to events such as mouse rollovers. The technique calls for an image to be "sliced" into pieces and then reconstructed inside a table on a Web page. This process allows the "hotspot" regions to be isolated into separate sections in separate cells of the table.

Even though slicing can be done by hand, it's an advanced technique that is best done in an editor such as Fireworks or ImageReady. Both willl write the necessary HTML code for you besides slicing the image.

Click on the screenshot image on this page to see an example sliced image. Here a menu page has been created where each menu item changes color on a mouse rollover. In addition, the textured background of the image has also been used as the background for the entire page, making it seem as if the image is filling the entire window. The actual image is 385x300. (Image only.)

This example sliced image was created in Macromedia's Fireworks which also automatically sliced the image and wrote the HTML page. 47 separate graphics were created when the image was sliced. Here are some screen shots of the sliced image as seen in Fireworks.

Here's an exploded version of the sliced image which makes it easier to see the slices. (FYI, the exploded version was created by changing the CELLPADDING attribute of the table that contains the slices. This change adds space between the slices.)

When should you use sliced images?
Some developers/designers think that all large images should be sliced because the full image will download faster if it's in pieces. Some say only slice images if they contain "behaviors" like rollovers. Here's more information on this point from Macromedia itself.

For our course, I suggest only slicing images if the image contains rollovers.

As an example of an alternative to the sliced image menu, here's a non-sliced version, without rollovers, where the menu options have been created using an image map. (See Image Maps for more information.)

Here's another example of a sliced image. This one was created in Adobe's ImageReady.