Image Slices

Help Center > Adobe ImageReady > Image Slices

A slice is the dividing of an image, created to reduce loading time and to hyperlink slices of the image to various destinations.

To create a slice we must go through several steps:

  • First we must select our slice tool. Click on the slice tool in the tool box
  • Next click and drag your slice onto the image. ImageReady will then divide your image to correctly divide the image up. In the example below, by creating a box in the middle ImageReady has sliced the image into 5 slices
  • You have now created a slice

Now that we have our slice we can turn that area into a clickable area, we can add rollover effects, we can even add hyperlinks to our image map.

In our web content palette we now can see our slice. This is where we will go to add rollover effects or animation. This will be covered later. However keep in mind that this is the location where you can view all of your slices. You can even select your slice by clicking on it in the web content palette.

To add a hyperlink to our slice:

  • First select the slice. You may either click on the slice in the web content palette or you may use the slice selection tool located in the tool box.
  • In the slice palette, enter a URL (be sure to include http://)
  • In the slice palette, choose a target for the URL your choices are as follows:
    • _Blank Displays the linked file in a new browser window
    • _self Displays the linked file in the same browser window as the original file
    • _parent Displays the linked file in the same frameset. (this only works if you are using frames in your HTML document.
    • _top Replaces the entire browser window with the linked file. This is like _parent but it covers all framesets.
  • Fill out the Alt tag. This is for visually impaired users and those with web browsers that do not support your image files. This last step is not necessary but it can only help.
  • Your slice palette should resemble something like this:

  • You now have a working slice. To test your image map go to File > Preview in. This will open up your image as if it were on a Web page. If you look in the HTML you will see that ImageReady has divided your main image into a table with X number of GIFs, with X being the number of slices in your page.

last modified on 11/20/2007 16:31