Image Slicing & Rollovers

A common technique for optimizing web images, and providing interactivity on the page, is “slicing” the image into separate pieces, and then reassembling it in a table on the page. This allows each separate “slice” to be properly optimized, and also allows some of the slices to have interactive behaviors assigned to them (most commonly “rollover” behaviors that change the image when the mouse “rolls over” it).

We’ll discuss the reasons for using this approach to images, and then work with Fireworks to slice an image and add rollover behaviors.