Go Back

Slice It!
ShoeString's PictureDicerTM for Windows Version 0.39 1998-01-17
©1998 ShoeString Projects, IRL Bill Phillips All Rights Reserved.

One way of putting a link on different parts of your image is to slice it!

A good way of doing this is by using a utility like Shoe String Picture Dicer. It is a Freeware tool that chops any image file into several smaller images, suitable for creating mouseover effects and pseudo-imagemaps on Web pages. It also generates the HTML for a table to contain the partial images and display them so they appear as the original uncut image.

Send thanks to the author for making this great tool for free! You can visit his site here : http://www.ziplink.net/~shoestring/dicer01.htm

Here's a simple instruction on how to use the software.

1 Open your image you wish to slice. Once you double-click your mouse on the image filename, a Verify Basename window popup. You'll be asked to provide the path and what will be the first 4 letters of the files that Picture Dicer will generate. Please be reminded that the program will slice your image and dump the diced images into which folder you specified. It will then generate an HTML file, and several GIF/JPG files.

On this example, I am going to slice an image named INT.GIF then place all generated files under the folder named c:\Web\018\web-page\int\ . It will then create an HTML file named INT.HTM and several GIF/JPG files. On this case files will be something like INT0001.GIF, INT0002.GIF, INT0003.GIF.... etc.

Figure 1

2 On my example image, I wanted to create a link for each buttons. Now, use your mouse to divide the image into cells:

(a) Hold down the left-button to make a vertical cut, and the right-button to make horizontal cut.

(b) Move the mouse to position the cut where you want it, then release the button.

(c) Repeat as nescessary.

Note: The order in which you make the cut doesn't matter. You can erase horizontal or vertical cuts by clicking on the blue and red markers above and on the left side of the image window. The cursor changes to a "NO" symbol to remind you this will remove the cut.

Figure 2

3 When all cuts are made, select Process Image from the File menu. The program will create a .GRD file representing your cuts, some number of image files in the output format you selected, and an HTML file containing a table to display the cells in original form.

This is what it looks like exactly when I loaded the generated HTML file on FrontPage Express. It already has a table and ready to put a link.

Figure 3

Home | Tutorials | W3 Corner | Freebies | Pixel Arena | Message Board | Resources
Portfolio | E-mail | About | Guest Book

Pinoy7 © 2006 - 2007 Richie Dumlao All Rights Reserved.