|
IMAGE
SLICING
A LIMITATION OF IMAGE MAPS Image maps are limited. They do not allow you to alter the image
itself. You cannot efficiently alter
one area in the image. For example, if you had a large image of an
interface filled with buttons, you could make the buttons clickable using
image maps but you couldn’t not make them change colours when you click on
them. SOLUTION The solution is to slice up your image into parts
and then re-assemble your image in an HTML document. Then, each part of the image can be dealt
with on its own. EXAMPLE Click here to
see a simple example of an image that was manually sliced up and put back
together in HTML. Each letter was also
edited to have a normal and a bright version of it. Finally, JavaScript mouseOver code was used
to complete the interactivity. STEPS TO CREATING AN
INTERACTIVE SLICED IMAGE 1-Slice your image into parts. 2-Combine your image using HTML. 3-Use graphic editing to alter any images. 4-Include code such as mouseOver code to make the
image interactive. IMAGE SLICING TOOLS There are tools that work well for image
slicing. Photoshop: The
full version of Photoshop (not Elements) has a built-in tool for image
slicing. Fireworks: Fireworks
is also a software program that is in the computer lab that provide an image
slicing tool. Click here to see an older
page showing how to use Fireworks for image slicing. Image Slicer Dot Com: This
online tool allows you to slice your image like you want. However, one has to be very careful to have
all selections line up perfectly. Other online tools: There
are many online tools that can help to slice your image. Simply search for “online image slicer”. SLICING IMAGES ON YOUR OWN You can also slice up your image on your own using
any image editor such as Pixlr, Gimp or Paint.net. A few tips: · All sub
images (slices) must be rectangular. · All
images that appear side by side must be of the same height. · You
should start by separating your image into full rows. · Once
you have your rows, each row can be separated into different columns. Mr. Campeau’s approach is to create a
semi-transparent layer above the image.
The layer gets separated into rectangles with different colours each
representing one sub image (slice).
Then, the image is cropped around each rectangle and saved. EXAMPLE OF SLICING! Click here
to see an example. ABOUT STEPS 2 – 4 Steps 2 to 4 are not explained here. Ask for help if you are uncertain.
|
