home *** CD-ROM | disk | FTP | other *** search
/ Mac Easy 2010 May / Mac Life Ubuntu.iso / casper / filesystem.squashfs / usr / share / gimp / 2.0 / help / en / python-fu-slice.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  18.3 KB  |  475 lines
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>14.4.¬† Slice</title>
  7.     <link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
  8.     <link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
  9.     <link rel="stylesheet" href="gimp-help-custom.css" type="text/css" />
  10.     <link rel="alternate stylesheet" href="gimp22.css" type="text/css" title="gimp22" />
  11.     <meta name="generator" content="DocBook XSL Stylesheets V1.73.2" />
  12.     <link rel="start" href="index.html" title="GNU Image Manipulation Program" />
  13.     <link rel="up" href="filters-web.html" title="14.¬† Web Filters" />
  14.     <link rel="prev" href="plug-in-semiflatten.html" title="14.3.¬† Semi-Flatten" />
  15.     <link rel="next" href="filters-alpha-to-logo.html" title="15.¬† Alpha to Logo Filters" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">14.4.¬†
  22.     <span lang="en" xml:lang="en">Slice</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="plug-in-semiflatten.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  27.           <th width="60%" align="center">14.¬†
  28.     <span lang="en" xml:lang="en">Web Filters</span>
  29.   </th>
  30.           <td width="20%" align="right">¬†<a accesskey="n" href="filters-alpha-to-logo.html"><img src="../images/next.png" alt="Next" /></a></td>
  31.         </tr>
  32.       </table>
  33.       <hr />
  34.     </div>
  35.     <div class="sect2" lang="en" xml:lang="en">
  36.       <div class="titlepage">
  37.         <div>
  38.           <div>
  39.             <h3 class="title"><a id="python-fu-slice"></a>14.4.¬†
  40.     <span lang="en" xml:lang="en">Slice</span>
  41.   </h3>
  42.           </div>
  43.           <div>
  44.             <div class="revhistory">
  45.               <table border="1" width="100%" summary="Revision history">
  46.                 <tr>
  47.                   <th align="left" valign="top" colspan="3">
  48.                     <b>Revision History</b>
  49.                   </th>
  50.                 </tr>
  51.                 <tr>
  52.                   <td align="left">Revision $Revision: 2442 $</td>
  53.                   <td align="left">2008-04-05</td>
  54.                   <td align="left">ude</td>
  55.                 </tr>
  56.               </table>
  57.             </div>
  58.           </div>
  59.         </div>
  60.       </div>
  61.       <a id="id2781484" class="indexterm"></a>
  62.       <a id="id2781502" class="indexterm"></a>
  63.       <div class="sect3" lang="en" xml:lang="en">
  64.         <div class="titlepage">
  65.           <div>
  66.             <div>
  67.               <h4 class="title"><a id="id2781511"></a>14.4.1.¬†
  68.       <span lang="en" xml:lang="en">Overview</span>
  69.     </h4>
  70.             </div>
  71.           </div>
  72.         </div>
  73.         <div class="figure">
  74.           <a id="id2781521"></a>
  75.           <p class="title">
  76.             <b>Figure¬†16.290.¬†
  77.         <span lang="en" xml:lang="en">
  78.           Example for the ‚Äú<span class="quote">Slice</span>‚Äù filter
  79.         </span>
  80.       </b>
  81.           </p>
  82.           <div class="figure-contents">
  83.             <div class="mediaobject">
  84.               <img src="../images/filters/examples/taj_guides.jpg" alt="Example for the Slice filter" />
  85.               <div class="caption">
  86.                 <p>Original image with guides</p>
  87.               </div>
  88.             </div>
  89.             <div class="mediaobject">
  90.               <img src="../images/filters/examples/web-taj-slice.jpg" alt="Example for the Slice filter" />
  91.               <div class="caption">
  92.                 <p>‚Äú<span class="quote">Slice</span>‚Äù applied</p>
  93.               </div>
  94.             </div>
  95.           </div>
  96.         </div>
  97.         <br class="figure-break" />
  98.         <p>
  99.       This filter is a simple and easy to use helper for creating sensitive
  100.       images to be used in HTML files. The filter slices up the source image
  101.       (like the <a class="link" href="plug-in-guillotine.html" title="9.10.¬† Guillotine">Guillotine</a> command
  102.       does) along its horizontal and vertical guides, and produces a set of
  103.       sub-images. At the same time it creates a piece of HTML code for a table
  104.       saved in a text file. Every table cell contains one part of the image.
  105.       The text file should then be embedded in an HTML document.
  106.     </p>
  107.         <p>
  108.       Note that this filter is really a very simple helper. A typical HTML
  109.       code produced by the filter may be not much more than this:
  110.     </p>
  111.         <div class="example">
  112.           <a id="id2781615"></a>
  113.           <p class="title">
  114.             <b>Example¬†16.1.¬†
  115.         <span lang="en" xml:lang="en">
  116.           Simple ‚Äú<span class="quote">Slice</span>‚Äù filter example output
  117.         </span>
  118.       </b>
  119.           </p>
  120.           <div class="example-contents">
  121.             <pre class="programlisting">
  122. <table cellpadding="0" border="0" cellspacing="0">
  123.   <tr>
  124.     <td><img alt="" src="slice_0_0.png"/></td>
  125.     <td><img alt="" src="slice_0_1.png"/></td>
  126.   </tr>
  127.   <tr>
  128.     <td><img alt="" src="slice_1_0.png"/></td>
  129.     <td><img alt="" src="slice_1_1.png"/></td>
  130.   </tr>
  131. </table>
  132.       </pre>
  133.             <p>
  134.         Produced HTML code; the ‚Äú<span class="quote">style</span>‚Äù attribute has been
  135.         omitted.
  136.       </p>
  137.           </div>
  138.         </div>
  139.         <br class="example-break" />
  140.         <p>
  141.       When there are no guides in the image, the filter will no nothing. If,
  142.       however, the guides are just hidden, the filter will work.
  143.     </p>
  144.         <div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
  145.           <table border="0" summary="Tip">
  146.             <tr>
  147.               <td rowspan="2" align="center" valign="top" width="25">
  148.                 <img alt="[Tip]" src="../images/tip.png" />
  149.               </td>
  150.               <th align="left">Tip</th>
  151.             </tr>
  152.             <tr>
  153.               <td align="left" valign="top">
  154.                 <p>
  155.         The <a class="link" href="plug-in-imagemap.html" title="14.2.¬† ImageMap">ImageMap</a> filter is a much
  156.         more powerful and sophisticated tool for creating sensitive images.
  157.         (But it is also much more complex...)
  158.       </p>
  159.               </td>
  160.             </tr>
  161.           </table>
  162.         </div>
  163.       </div>
  164.       <div class="sect3" lang="en" xml:lang="en">
  165.         <div class="titlepage">
  166.           <div>
  167.             <div>
  168.               <h4 class="title"><a id="id2781682"></a>14.4.2.¬†
  169.       <span lang="en" xml:lang="en">Activate the filter</span>
  170.     </h4>
  171.             </div>
  172.           </div>
  173.         </div>
  174.         <p>
  175.       This filter is found in the image window menu under
  176.       <span class="guimenu"><span class="accel">F</span>ilters</span> ‚Üí <span class="guisubmenu"><span class="accel">W</span>eb</span> ‚Üí <span class="guimenuitem"><span class="accel"></span>Slice</span>.
  177.     </p>
  178.       </div>
  179.       <div class="sect3" lang="en" xml:lang="en">
  180.         <div class="titlepage">
  181.           <div>
  182.             <div>
  183.               <h4 class="title"><a id="id2781728"></a>14.4.3.¬†
  184.       <span lang="en" xml:lang="en">Options</span>
  185.     </h4>
  186.             </div>
  187.           </div>
  188.         </div>
  189.         <div class="figure">
  190.           <a id="id2781739"></a>
  191.           <p class="title">
  192.             <b>Figure¬†16.291.¬†
  193.         <span lang="en" xml:lang="en">‚Äú<span class="quote">Slice</span>‚Äù options</span>
  194.       </b>
  195.           </p>
  196.           <div class="figure-contents">
  197.             <div class="mediaobject">
  198.               <img src="../images/filters/options-web-slice.png" alt="Slice options" />
  199.             </div>
  200.           </div>
  201.         </div>
  202.         <br class="figure-break" />
  203.         <div class="variablelist">
  204.           <p>
  205.         Most options are self-explanatory, but nevertheless:
  206.       </p>
  207.           <dl>
  208.             <dt>
  209.               <span class="term">
  210.           <span lang="en" xml:lang="en">Path for HTML export</span>
  211.         </span>
  212.             </dt>
  213.             <dd>
  214.               <p>
  215.             Where the HTML file and the image files will be saved. By default
  216.             these files will be stored in the current working directory.
  217.             Clicking on the buttom to the right opens a pull-down menu, where
  218.             you can select a different location.
  219.           </p>
  220.             </dd>
  221.             <dt>
  222.               <span class="term">
  223.           <span lang="en" xml:lang="en">Filename for export</span>
  224.         </span>
  225.             </dt>
  226.             <dd>
  227.               <p>
  228.             The name of the HTML file. You can change the filename using the
  229.             textbox.
  230.           </p>
  231.             </dd>
  232.             <dt>
  233.               <span class="term">
  234.           <span lang="en" xml:lang="en">Image name prefix</span>
  235.         </span>
  236.             </dt>
  237.             <dd>
  238.               <p>
  239.             The name of an image file produced by this filter is
  240.             <code class="filename">prefix_i_k.ext</code>, where
  241.             <code class="filename">prefix</code> is that part of the filename which you
  242.             can freely select using the textbox to the right, by default:
  243.             <code class="filename">slice</code>.
  244.             (<code class="filename">i</code> and <code class="filename">k</code> are the numbers
  245.             of the row and the column, each starting with 0;
  246.             <code class="filename">.ext</code> is the filename
  247.             extension depending on the selected
  248.             <span class="guilabel">Image¬†format</span>.)
  249.           </p>
  250.               <p>
  251.             This option is particularly useful when you want to create
  252.             <span class="guilabel">Javascript for onmouseover and clicked</span> and
  253.             need different sets of images.
  254.           </p>
  255.             </dd>
  256.             <dt>
  257.               <span class="term">
  258.           <span lang="en" xml:lang="en">Image format</span>
  259.           <span lang="en" xml:lang="en">Format de l'Image</span>
  260.         </span>
  261.             </dt>
  262.             <dd>
  263.               <p>
  264.             You can choose to create image files in the
  265.             <a class="link" href="glossary.html#glossary-gif" title="GIF">GIF</a>,
  266.             <a class="link" href="glossary.html#glossary-jpeg" title="JPEG">JPG</a>, or
  267.             <a class="link" href="glossary.html#glossary-png" title="PNG">PNG</a>
  268.             <a class="link" href="glossary.html#glossary-fileformat" title="File Format">file¬†format</a>.
  269.           </p>
  270.             </dd>
  271.             <dt>
  272.               <span class="term">
  273.           <span lang="en" xml:lang="en">
  274.             Separate image folder; Folder for image export
  275.           </span>
  276.         </span>
  277.             </dt>
  278.             <dd>
  279.               <p>
  280.             When <span class="guilabel">Separate image folder</span> is enabled, a
  281.             folder will be created where the image files will be placed. By
  282.             default, the name of this destination folder is
  283.             <code class="filename">images</code>, but you can change
  284.             it in the <span class="guilabel">Folder for image export</span> textbox.
  285.           </p>
  286.               <div class="example">
  287.                 <a id="id2782016"></a>
  288.                 <p class="title">
  289.                   <b>Example¬†16.2.¬†
  290.               <span lang="en" xml:lang="en">With separate image folder</span>
  291.             </b>
  292.                 </p>
  293.                 <div class="example-contents">
  294.                   <div class="mediaobject">
  295.                     <img src="../images/filters/examples/slice-folder.png" />
  296.                     <div class="caption">
  297.                       <p>
  298.                   Result of enabled ‚Äú<span class="quote">Separate image folder</span>‚Äù
  299.                 </p>
  300.                     </div>
  301.                   </div>
  302.                 </div>
  303.               </div>
  304.               <br class="example-break" />
  305.             </dd>
  306.             <dt>
  307.               <span class="term">
  308.           <span lang="en" xml:lang="en">Space between table elements</span>
  309.         </span>
  310.             </dt>
  311.             <dd>
  312.               <p>
  313.             This value (0-15) will be passed as ‚Äú<span class="quote">cellspacing</span>‚Äù
  314.             attribute to the HTML table. The result is, that horizontal and
  315.             vertical guides will be replaced with stripes of the specified
  316.             width:
  317.           </p>
  318.               <div class="example">
  319.                 <a id="id2782082"></a>
  320.                 <p class="title">
  321.                   <b>Example¬†16.3.¬†
  322.               <span lang="en" xml:lang="en">Space between table elements</span>
  323.             </b>
  324.                 </p>
  325.                 <div class="example-contents">
  326.                   <div class="mediaobject">
  327.                     <img src="../images/filters/examples/slice-cellspacing.png" />
  328.                     <div class="caption">
  329.                       <p>Corresponding HTML code snippet</p>
  330.                     </div>
  331.                   </div>
  332.                 </div>
  333.               </div>
  334.               <br class="example-break" />
  335.               <p>
  336.             Note that the image will not be enlarged by the size of these
  337.             stripes. Instead, the resulting HTML image will look like you have
  338.             drawn the stripes with the Eraser tool.
  339.           </p>
  340.             </dd>
  341.             <dt>
  342.               <span class="term">
  343.           <span lang="en" xml:lang="en">Javascript for onmouseover and clicked</span>
  344.         </span>
  345.             </dt>
  346.             <dd>
  347.               <p>
  348.             When this option is enabled, the filter will also add some
  349.             JavaScript code. Like the HTML code, this code does not work as
  350.             is, rather it's a good starting point for adding some dynamic
  351.             functionality. The JavaScript code provides a function to handle
  352.             events like ‚Äú<span class="quote">onmouseover</span>‚Äù:
  353.           </p>
  354.               <div class="example">
  355.                 <a id="id2782156"></a>
  356.                 <p class="title">
  357.                   <b>Example¬†16.4.¬†
  358.               <span lang="en" xml:lang="en">JavaScript code snippet</span>
  359.             </b>
  360.                 </p>
  361.                 <div class="example-contents">
  362.                   <pre class="programlisting">
  363. function exchange (image, images_array_name, event)
  364.   {
  365.     name = image.name;
  366.     images = eval (images_array_name);
  367.     switch (event)
  368.       {
  369.         case 0:
  370.           image.src = images[name + "_plain"].src;
  371.           break;
  372.         case 1:
  373.           image.src = images[name + "_hover"].src;
  374.           break;
  375.         case 2:
  376.           image.src = images[name + "_clicked"].src;
  377.           break;
  378.         case 3:
  379.           image.src = images[name + "_hover"].src;
  380.           break;
  381.       }
  382.   }
  383.             </pre>
  384.                 </div>
  385.               </div>
  386.               <br class="example-break" />
  387.             </dd>
  388.             <dt>
  389.               <span class="term">
  390.           <span lang="en" xml:lang="en">Skip animation for table caps</span>
  391.         </span>
  392.             </dt>
  393.             <dd>
  394.               <p>
  395.             When disabled, the filter will add a
  396.             <code class="code"><a¬†href="#">¬†...¬†</a></code>
  397.             hyperlink stub to every table cell. When enabled (this is the
  398.             default) and there are at least two horizontal or two vertical
  399.             guides, the filter will not add a hyperlink stub to the first and
  400.             last cell in a column or row. This may be useful when you have an
  401.             image with border and you don't want to make the border sensitive.
  402.           </p>
  403.               <div class="example">
  404.                 <a id="id2782217"></a>
  405.                 <p class="title">
  406.                   <b>Example¬†16.5.¬†
  407.               <span lang="en" xml:lang="en">
  408.                 Skipped animation for table caps (simplified HTML code)
  409.               </span>
  410.             </b>
  411.                 </p>
  412.                 <div class="example-contents">
  413.                   <pre class="programlisting">
  414. <table cellpadding="0" border="0" cellspacing="0">
  415.   <tr>
  416.     <td><img alt="" src="images/slice_0_0.png"/></td>
  417.     <td><img alt="" src="images/slice_0_1.png"/></td>
  418.     <td><img alt="" src="images/slice_0_2.png"/></td>
  419.     <td><img alt="" src="images/slice_0_3.png"/></td>
  420.   </tr>
  421.   <tr>
  422.     <td><img alt="" src="images/slice_1_0.png"/></td>
  423.     <td><a href="#"><img alt="" src="images/slice_1_1.png"/></a></td>
  424.     <td><a href="#"><img alt="" src="images/slice_1_2.png"/></a></td>
  425.     <td><img alt="" src="images/slice_1_3.png"/></td>
  426.   </tr>
  427.   <tr>
  428.     <td><img alt="" src="images/slice_2_0.png"/></td>
  429.     <td><img alt="" src="images/slice_2_1.png"/></td>
  430.     <td><img alt="" src="images/slice_2_2.png"/></td>
  431.     <td><img alt="" src="images/slice_2_3.png"/></td>
  432.   </tr>
  433. </table>
  434.             </pre>
  435.                   <p>
  436.               Only inner cells have (empty) hyperlinks.
  437.             </p>
  438.                 </div>
  439.               </div>
  440.               <br class="example-break" />
  441.             </dd>
  442.           </dl>
  443.         </div>
  444.       </div>
  445.     </div>
  446.     <div class="navfooter">
  447.       <hr />
  448.       <table width="100%" summary="Navigation footer">
  449.         <tr>
  450.           <td width="40%" align="left"><a accesskey="p" href="plug-in-semiflatten.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  451.           <td width="20%" align="center">
  452.             <a accesskey="u" href="filters-web.html">
  453.               <img src="../images/up.png" alt="Up" />
  454.             </a>
  455.           </td>
  456.           <td width="40%" align="right">¬†<a accesskey="n" href="filters-alpha-to-logo.html"><img src="../images/next.png" alt="Next" /></a></td>
  457.         </tr>
  458.         <tr>
  459.           <td width="40%" align="left" valign="top"><a accesskey="p" href="plug-in-semiflatten.html">14.3.¬†
  460.     <span lang="en" xml:lang="en">Semi-Flatten</span>
  461.   </a>¬†</td>
  462.           <td width="20%" align="center">
  463.             <a accesskey="h" href="index.html">
  464.               <img src="../images/home.png" alt="Home" />
  465.             </a>
  466.           </td>
  467.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="filters-alpha-to-logo.html">15.¬†
  468.     <span lang="en" xml:lang="en">Alpha to Logo Filters</span>
  469.   </a></td>
  470.         </tr>
  471.       </table>
  472.     </div>
  473.   </body>
  474. </html>
  475.