Slicing graphics to make them more interactive has been around for some time. Web interface designers often create interfaces with rich graphic layouts in a high-end editor such as Adobe Photoshop and then slice this image up. The image is re--assembled via a table structure which is built in HTML. This used to be completed by hand but was awkward and problematic.

The method we use here in the tutorials is easy. We use a vector drawing package like Fireworks, to create the initial graphic layout. We then use a great feature of Fireworks which not only exports the slices but also creates the HTML table to re-assemble them.