Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

14.4.  Slice

14.4.1.  Overview

Figure 16.325.  Example for the “Slice” filter

Example for the Slice filter

Original image with guides

Example for the Slice filter

Slice” applied


This filter is a simple and easy to use helper for creating sensitive images to be used in HTML files. The filter slices up the source image (like the Guillotine command does) along its horizontal and vertical guides, and produces a set of sub-images. At the same time it creates a piece of HTML code for a table saved in a text file. Every table cell contains one part of the image. The text file should then be embedded in an HTML document.

Note that this filter is really a very simple helper. A typical HTML code produced by the filter may be not much more than this:

Example 16.1.  Simple “Slice” filter example output

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img alt="" src="slice_0_0.png"/></td>
    <td><img alt="" src="slice_0_1.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="slice_1_0.png"/></td>
    <td><img alt="" src="slice_1_1.png"/></td>
  </tr>
</table>
        

Produced HTML code; the “style” attribute has been omitted.


When there are no guides in the image, the filter will no nothing. If, however, the guides are just hidden, the filter will work.

[Tip] Tip

The ImageMap filter is a much more powerful and sophisticated tool for creating sensitive images. (But it is also much more complex...)

14.4.2.  Activate the filter

This filter is found in the image window menu under FiltersWebSlice.

14.4.3.  Options

Figure 16.326.  Slice” options

Slice options

Most options are self-explanatory, but nevertheless:

Path for HTML export

Where the HTML file and the image files will be saved. By default these files will be stored in the current working directory. Clicking on the button to the right opens a pull-down menu, where you can select a different location.

Filename for export

The name of the HTML file. You can change the filename using the textbox.

Image name prefix

The name of an image file produced by this filter is prefix_i_k.ext, where prefix is that part of the filename which you can freely select using the textbox to the right, by default: slice. (i and k are the numbers of the row and the column, each starting with 0; .ext is the filename extension depending on the selected Image format.)

This option is particularly useful when you want to create Javascript for onmouseover and clicked and need different sets of images.

Image format

You can choose to create image files in the GIF, JPG, or PNG file format.

Separate image folder; Folder for image export

When Separate image folder is enabled, a folder will be created where the image files will be placed. By default, the name of this destination folder is images, but you can change it in the Folder for image export textbox.

Example 16.2.  With separate image folder

Result of enabled “Separate image folder


Space between table elements

This value (0-15) will be passed as “cellspacing” attribute to the HTML table. The result is, that horizontal and vertical guides will be replaced with stripes of the specified width:

Example 16.3.  Space between table elements

Corresponding HTML code snippet


Note that the image will not be enlarged by the size of these stripes. Instead, the resulting HTML image will look like you have drawn the stripes with the Eraser tool.

Javascript for onmouseover and clicked

When this option is enabled, the filter will also add some JavaScript code. Like the HTML code, this code does not work as is, rather it's a good starting point for adding some dynamic functionality. The JavaScript code provides a function to handle events like “onmouseover”:

Example 16.4.  JavaScript code snippet

function exchange (image, images_array_name, event)
  {
    name = image.name;
    images = eval (images_array_name);

    switch (event)
      {
        case 0:
          image.src = images[name + "_plain"].src;
          break;
        case 1:
          image.src = images[name + "_hover"].src;
          break;
        case 2:
          image.src = images[name + "_clicked"].src;
          break;
        case 3:
          image.src = images[name + "_hover"].src;
          break;
      }
  }
              

Skip animation for table caps

When disabled, the filter will add a <a href="#"> ... </a> hyperlink stub to every table cell. When enabled (this is the default) and there are at least two horizontal or two vertical guides, the filter will not add a hyperlink stub to the first and last cell in a column or row. This may be useful when you have an image with border and you don't want to make the border sensitive.

Example 16.5.  Skipped animation for table caps (simplified HTML code)

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img alt="" src="images/slice_0_0.png"/></td>
    <td><img alt="" src="images/slice_0_1.png"/></td>
    <td><img alt="" src="images/slice_0_2.png"/></td>
    <td><img alt="" src="images/slice_0_3.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="images/slice_1_0.png"/></td>
    <td><a href="#"><img alt="" src="images/slice_1_1.png"/></a></td>
    <td><a href="#"><img alt="" src="images/slice_1_2.png"/></a></td>
    <td><img alt="" src="images/slice_1_3.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="images/slice_2_0.png"/></td>
    <td><img alt="" src="images/slice_2_1.png"/></td>
    <td><img alt="" src="images/slice_2_2.png"/></td>
    <td><img alt="" src="images/slice_2_3.png"/></td>
  </tr>
</table>
              

Only inner cells have (empty) hyperlinks.



 
 
  Published under the terms of the GNU General Public License Design by Interspire