LESSON 10 – LAYOUT TECHNIQUE – IMAGE SLICING

PROBLEMS WITH IMAGE MAPS

The problem with image maps is that they do not allow you to alter the image itself. So you cannot efficiently make a mouseover button to make the interface respond to the user.

IMAGE SLICING TECHNIQUE

While this could be done manually, it is much simpler to use a software to do the image slicing work. The software takes care of two major tasks:

1) Precisely slices up the image into smaller parts;

2) Creates the HTML table code and inserts in the images in the correct locations.

PHOTOSHOP ELEMENTS

The version of Photoshop that all schools in Ontario have access to is called Photoshop Elements. It is a little simpler version than the complete Photoshop. One tool that is NOT in Elements is the Image Slicing tool! ARG!

FIREWORKS

Fireworks is another graphic editing software. It use to complete against Photoshop but is now owned by the same company. The version we have at school does support Image Slicing. Hurray!

Click here for a web document showing how to do image slicing.

MOUSEOVER

A mouseover is simply an image that changes when you place the mouse cursor over it. It is usually used for buttons or other areas that can be clicked.

It is important to realize that mouse overs are in fact two different images.

Click here for a web documents that shows a mouse over button and gives the code required to make a mouseover.