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 / plug-in-imagemap.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  20.4 KB  |  531 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.2.¬† ImageMap</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="filters-web.html" title="14.¬† Web Filters" />
  15.     <link rel="next" href="plug-in-semiflatten.html" title="14.3.¬† Semi-Flatten" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">14.2.¬†
  22.     <span lang="en" xml:lang="en">ImageMap</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="filters-web.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="plug-in-semiflatten.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="plug-in-imagemap"></a>14.2.¬†
  40.     <span lang="en" xml:lang="en">ImageMap</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-03-18</td>
  54.                   <td align="left">ude</td>
  55.                 </tr>
  56.               </table>
  57.             </div>
  58.           </div>
  59.         </div>
  60.       </div>
  61.       <a id="id2780298" class="indexterm"></a>
  62.       <a id="id2780316" class="indexterm"></a>
  63.       <p>
  64.     In Web sensitive images are frequently used to get some effects when
  65.     defined areas are enabled by the pointer. Obviously the most used effect
  66.     is a dynamic link to another web page when one of the sensitive areas is
  67.     clicked on. This ‚Äú<span class="quote">filter</span>‚Äù allows you to design easily
  68.     sensitive areas within an image. Web site design softwares have this as a
  69.     standard function. In <acronym class="acronym">GIMP</acronym> you can do this in a similar
  70.     way.
  71.   </p>
  72.       <div class="sect3" lang="en" xml:lang="en">
  73.         <div class="titlepage">
  74.           <div>
  75.             <div>
  76.               <h4 class="title"><a id="id2780344"></a>14.2.1.¬†
  77.       <span lang="en" xml:lang="en">Overview</span>
  78.     </h4>
  79.             </div>
  80.           </div>
  81.         </div>
  82.         <p>
  83.       This plug-in lets you design graphically and friendly all areas you
  84.       want to delimit over your displayed image. You get the relevant part
  85.       of html tags that must be merged into the right place in your page html
  86.       code. You can define some actions linked to these areas too.
  87.     </p>
  88.         <p>
  89.       This is a complex tool which is not completely described here
  90.       (it works about like Web page makers offering this function). However
  91.       we want to describe here some of the most current handlings. If you
  92.       want, you can find a more complete descriptions in Grokking the GIMP
  93.       with the
  94.       link <a class="xref" href="bibliography.html#bibliography-online-grokking-gimp-imagemap" title="Grokking the GIMP (9.2 Clickable Image Maps)">[<abbr class="abbrev">GROKKING02</abbr>]</a>.
  95.     </p>
  96.       </div>
  97.       <div class="sect3" lang="en" xml:lang="en">
  98.         <div class="titlepage">
  99.           <div>
  100.             <div>
  101.               <h4 class="title"><a id="id2780386"></a>14.2.2.¬†
  102.       <span lang="en" xml:lang="en">Activate the filter</span>
  103.     </h4>
  104.             </div>
  105.           </div>
  106.         </div>
  107.         <p>
  108.       From an image window, you can find this filter through
  109.       <span class="guimenu">Filters</span> ‚Üí <span class="guisubmenu">Web</span> ‚Üí <span class="guimenuitem">ImageMap</span>
  110.     </p>
  111.         <p>
  112.       The window is a small one, but you can magnify it.
  113.       The main useful areas are:
  114.     </p>
  115.         <div class="itemizedlist">
  116.           <ul type="bullet">
  117.             <li style="list-style-type: disc">
  118.               <p>
  119.           completely on the left are vertically displayed icons, one for
  120.           pointing, three for calling tools to generate various shape areas,
  121.           one to edit zone properties, and finally one to erase a selected
  122.           zone; you can call these functions with the Mapping menu,
  123.         </p>
  124.             </li>
  125.             <li style="list-style-type: disc">
  126.               <p>
  127.           just on the right is your working area where you can draw all the
  128.           shapes areas you want with the relevant tools,
  129.         </p>
  130.             </li>
  131.             <li style="list-style-type: disc">
  132.               <p>
  133.           on the right is displayed an icon vertical set; its use is obvious
  134.           but a help pop-up gives you some information about each function,
  135.         </p>
  136.             </li>
  137.             <li style="list-style-type: disc">
  138.               <p>
  139.           finally, even on the right is a display area, as a property list of
  140.           the created areas. A click on one item of the list selects
  141.           automatically the corresponding shape in the working area,
  142.         </p>
  143.             </li>
  144.           </ul>
  145.         </div>
  146.       </div>
  147.       <div class="sect3" lang="en" xml:lang="en">
  148.         <div class="titlepage">
  149.           <div>
  150.             <div>
  151.               <h4 class="title"><a id="id2780491"></a>14.2.3.¬†
  152.       <span lang="en" xml:lang="en">Options</span>
  153.     </h4>
  154.             </div>
  155.           </div>
  156.         </div>
  157.         <div class="figure">
  158.           <a id="id2780504"></a>
  159.           <p class="title">
  160.             <b>Figure¬†16.284.¬†
  161.         <span lang="en" xml:lang="en">Imagemap filter options</span>
  162.       </b>
  163.           </p>
  164.           <div class="figure-contents">
  165.             <div class="mediaobject">
  166.               <img src="../images/filters/imagemap-options.png" alt="Imagemap filter options" />
  167.               <div class="caption">
  168.                 <p>Imagemap window</p>
  169.               </div>
  170.             </div>
  171.           </div>
  172.         </div>
  173.         <br class="figure-break" />
  174.         <div class="sect4" lang="en" xml:lang="en">
  175.           <div class="titlepage">
  176.             <div>
  177.               <div>
  178.                 <h5 class="title"><a id="id2780542"></a>14.2.3.1.¬†
  179.         <span lang="en" xml:lang="en">The Menu Bar</span>
  180.       </h5>
  181.               </div>
  182.             </div>
  183.           </div>
  184.           <p>
  185.         The menu bar is similar to the image window menu bar, only a few menus
  186.         or menu entries are different:
  187.       </p>
  188.           <div class="variablelist">
  189.             <dl>
  190.               <dt>
  191.                 <span class="term">File</span>
  192.               </dt>
  193.               <dd>
  194.                 <div class="variablelist">
  195.                   <dl>
  196.                     <dt>
  197.                       <span class="term">Save; Save As</span>
  198.                     </dt>
  199.                     <dd>
  200.                       <p>
  201.                       Contrary to other filters, this plug-in doesn't make an
  202.                       image but a text file. So you must save your work in a
  203.                       text format.
  204.                     </p>
  205.                       <div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
  206.                         <table border="0" summary="Tip">
  207.                           <tr>
  208.                             <td rowspan="2" align="center" valign="top" width="25">
  209.                               <img alt="[Tip]" src="../images/tip.png" />
  210.                             </td>
  211.                             <th align="left">Tip</th>
  212.                           </tr>
  213.                           <tr>
  214.                             <td align="left" valign="top">
  215.                               <p>
  216.                       With
  217.                       <span class="guimenu">View</span> ‚Üí <span class="guimenuitem">Source</span>
  218.                       you can preview this text file content.
  219.                     </p>
  220.                             </td>
  221.                           </tr>
  222.                         </table>
  223.                       </div>
  224.                     </dd>
  225.                     <dt>
  226.                       <span class="term">Open; Open recent</span>
  227.                     </dt>
  228.                     <dd>
  229.                       <p>
  230.                       In the plug-in you can open the saved text file. The
  231.                       areas defined in your file will be loaded and
  232.                       overdisplayed; if the displayed image is not the
  233.                       original one or not with the same size,
  234.                       <acronym class="acronym">GIMP</acronym> will ask you for adapting the
  235.                       scale.
  236.                     </p>
  237.                     </dd>
  238.                   </dl>
  239.                 </div>
  240.               </dd>
  241.               <dt>
  242.                 <span class="term">Edit</span>
  243.               </dt>
  244.               <dd>
  245.                 <div class="variablelist">
  246.                   <dl>
  247.                     <dt>
  248.                       <span class="term">Edit area info</span>
  249.                     </dt>
  250.                     <dd>
  251.                       <div class="figure">
  252.                         <a id="id2780681"></a>
  253.                         <p class="title">
  254.                           <b>Figure¬†16.285.¬†
  255.                       <span lang="en" xml:lang="en">Editing an imagemap area</span>
  256.                     </b>
  257.                         </p>
  258.                         <div class="figure-contents">
  259.                           <div class="mediaobject">
  260.                             <img src="../images/filters/options-imagemap-area.png" alt="Editing an imagemap area" />
  261.                           </div>
  262.                         </div>
  263.                       </div>
  264.                       <br class="figure-break" />
  265.                       <p>
  266.                     In the settings dialog you can edit the area information
  267.                     of a selected area. This dialog will pop up automatically
  268.                     whenever you create a new area.
  269.                   </p>
  270.                     </dd>
  271.                   </dl>
  272.                 </div>
  273.               </dd>
  274.               <dt>
  275.                 <span class="term">View</span>
  276.               </dt>
  277.               <dd>
  278.                 <p>
  279.               This menu offers you special functions:
  280.             </p>
  281.                 <div class="variablelist">
  282.                   <dl>
  283.                     <dt>
  284.                       <span class="term">Area list</span>
  285.                     </dt>
  286.                     <dd>
  287.                       <p>
  288.                     Here you can hide or show the selection area.
  289.                   </p>
  290.                     </dd>
  291.                     <dt>
  292.                       <span class="term">Source</span>
  293.                     </dt>
  294.                     <dd>
  295.                       <p>
  296.                     Here you see the raw data as you would save it to or read
  297.                     it from a file.
  298.                   </p>
  299.                     </dd>
  300.                     <dt>
  301.                       <span class="term">Color; Grayscale</span>
  302.                     </dt>
  303.                     <dd>
  304.                       <p>
  305.                     You can select the image mode here and work with a
  306.                     Grayscale display.
  307.                   </p>
  308.                     </dd>
  309.                   </dl>
  310.                 </div>
  311.               </dd>
  312.               <dt>
  313.                 <span class="term">Mapping</span>
  314.               </dt>
  315.               <dd>
  316.                 <p>
  317.               You will seldom use this menu, since you can more easily access
  318.               selection tools by clicking on icons on the left of the working
  319.               area.
  320.             </p>
  321.                 <div class="variablelist">
  322.                   <dl>
  323.                     <dt>
  324.                       <span class="term">Arrow</span>
  325.                     </dt>
  326.                     <dd>
  327.                       <p>
  328.                     The arrow here represents the Move tool. When activated
  329.                     tool is selected, you can select and move an area on the
  330.                     image.
  331.                   </p>
  332.                       <p>
  333.                     With a polygon, you can use the arrow to move one of
  334.                     the red points. Right-click on a segment between two red
  335.                     points to open a pop-up menu that offers several
  336.                     possibilities: remove a red point, add a new point...
  337.                   </p>
  338.                     </dd>
  339.                     <dt>
  340.                       <span class="term">Rectangle; Circle; Polygon</span>
  341.                     </dt>
  342.                     <dd>
  343.                       <p>
  344.                     These tools let you create various shape areas: click on
  345.                     the image, move the pointer, and click again.
  346.                   </p>
  347.                     </dd>
  348.                     <dt>
  349.                       <span class="term">Edit Map Info</span>
  350.                     </dt>
  351.                     <dd>
  352.                       <div class="figure">
  353.                         <a id="id2780891"></a>
  354.                         <p class="title">
  355.                           <b>Figure¬†16.286.¬†
  356.                       <span lang="en" xml:lang="en">Editing the imagemap data</span>
  357.                     </b>
  358.                         </p>
  359.                         <div class="figure-contents">
  360.                           <div class="mediaobject">
  361.                             <img src="../images/filters/options-imagemap-info.png" alt="Editing the imagemap data" />
  362.                           </div>
  363.                         </div>
  364.                       </div>
  365.                       <br class="figure-break" />
  366.                       <p>
  367.                     With this simple dialog you can enter some items, which
  368.                     will be written to the resulting output file; either as
  369.                     comments (<span class="guilabel">Author</span>,
  370.                     <span class="guilabel">Description</span>
  371.                     ) or as attribute values of the HTML tags (
  372.                     <span class="guilabel">Image name</span>,
  373.                     <span class="guilabel">Title</span>,
  374.                     <span class="guilabel">Default URL</span>).
  375.                   </p>
  376.                     </dd>
  377.                   </dl>
  378.                 </div>
  379.               </dd>
  380.               <dt>
  381.                 <span class="term">Tools</span>
  382.               </dt>
  383.               <dd>
  384.                 <p>With the menu
  385.               <span class="guimenu">Tools</span>
  386.               you can create guides and even regularly spaced rectangular areas.
  387.             </p>
  388.               </dd>
  389.             </dl>
  390.           </div>
  391.         </div>
  392.         <div class="sect4" lang="en" xml:lang="en">
  393.           <div class="titlepage">
  394.             <div>
  395.               <div>
  396.                 <h5 class="title"><a id="id2781002"></a>14.2.3.2.¬†
  397.         <span lang="en" xml:lang="en">The Tool Bar</span>
  398.       </h5>
  399.               </div>
  400.             </div>
  401.           </div>
  402.           <p>
  403.         Most entries here are just shortcuts for some functions already
  404.         described. Exceptions:
  405.       </p>
  406.           <div class="variablelist">
  407.             <dl>
  408.               <dt>
  409.                 <span class="term">Move to Front; Send to Back</span>
  410.               </dt>
  411.               <dd>
  412.                 <p>
  413.               Here you can move an area entry to the bottom (‚Äú<span class="quote">Move to
  414.               Front</span>‚Äù)  or top (‚Äú<span class="quote">Send to Back</span>‚Äù)
  415.               of the area list.
  416.             </p>
  417.               </dd>
  418.             </dl>
  419.           </div>
  420.         </div>
  421.         <div class="sect4" lang="en" xml:lang="en">
  422.           <div class="titlepage">
  423.             <div>
  424.               <div>
  425.                 <h5 class="title"><a id="id2781051"></a>14.2.3.3.¬†
  426.         <span lang="en" xml:lang="en">The Working Area</span>
  427.       </h5>
  428.               </div>
  429.             </div>
  430.           </div>
  431.           <div class="figure">
  432.             <a id="id2781062"></a>
  433.             <p class="title">
  434.               <b>Figure¬†16.287.¬†
  435.           <span lang="en" xml:lang="en">The Working Area</span>
  436.         </b>
  437.             </p>
  438.             <div class="figure-contents">
  439.               <div class="mediaobject">
  440.                 <img src="../images/filters/options-imagemap-draw.png" alt="The Working Area" />
  441.               </div>
  442.             </div>
  443.           </div>
  444.           <br class="figure-break" />
  445.           <p>
  446.         In the main area of the imagemap window, on the left side, you will
  447.         find your working area where you can draw all the shapes areas you
  448.         want with the relevant tools.
  449.       </p>
  450.           <p>
  451.         Beside the working area there are vertically displayed icons, one for
  452.         pointing, three for calling tools to generate various shape areas, one
  453.         to edit zone properties, and finally one to erase a selected zone; you
  454.         can call these functions with the Mapping menu too.
  455.       </p>
  456.           <div class="caution" style="margin-left: 0.5in; margin-right: 0.5in;">
  457.             <table border="0" summary="Caution">
  458.               <tr>
  459.                 <td rowspan="2" align="center" valign="top" width="25">
  460.                   <img alt="[Caution]" src="../images/caution.png" />
  461.                 </td>
  462.                 <th align="left">Caution</th>
  463.               </tr>
  464.               <tr>
  465.                 <td align="left" valign="top">
  466.                   <p>
  467.           Note that the areas should not overlap.
  468.         </p>
  469.                 </td>
  470.               </tr>
  471.             </table>
  472.           </div>
  473.         </div>
  474.         <div class="sect4" lang="en" xml:lang="en">
  475.           <div class="titlepage">
  476.             <div>
  477.               <div>
  478.                 <h5 class="title"><a id="id2781128"></a>14.2.3.4.¬†
  479.         <span lang="en" xml:lang="en">The selection area</span>
  480.       </h5>
  481.               </div>
  482.             </div>
  483.           </div>
  484.           <p>
  485.         On the right is a display area, as a property list of the created
  486.         areas. A click on one item of the list selects automatically the
  487.         corresponding shape in the working area, then you can modify it.
  488.       </p>
  489.           <p>
  490.         Beside the display are is an icon vertical set; its use is obvious
  491.         but a help pop-up gives you some information about each function,
  492.       </p>
  493.           <p>
  494.         Unfortunately, the arrow symbols for moving a list entry up or down do
  495.         not work here.
  496.         But of course you carefully avoided to create overlapping areas, so
  497.         you do not use these functions at all.
  498.       </p>
  499.         </div>
  500.       </div>
  501.     </div>
  502.     <div class="navfooter">
  503.       <hr />
  504.       <table width="100%" summary="Navigation footer">
  505.         <tr>
  506.           <td width="40%" align="left"><a accesskey="p" href="filters-web.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  507.           <td width="20%" align="center">
  508.             <a accesskey="u" href="filters-web.html">
  509.               <img src="../images/up.png" alt="Up" />
  510.             </a>
  511.           </td>
  512.           <td width="40%" align="right">¬†<a accesskey="n" href="plug-in-semiflatten.html"><img src="../images/next.png" alt="Next" /></a></td>
  513.         </tr>
  514.         <tr>
  515.           <td width="40%" align="left" valign="top"><a accesskey="p" href="filters-web.html">14.¬†
  516.     <span lang="en" xml:lang="en">Web Filters</span>
  517.   </a>¬†</td>
  518.           <td width="20%" align="center">
  519.             <a accesskey="h" href="index.html">
  520.               <img src="../images/home.png" alt="Home" />
  521.             </a>
  522.           </td>
  523.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="plug-in-semiflatten.html">14.3.¬†
  524.     <span lang="en" xml:lang="en">Semi-Flatten</span>
  525.   </a></td>
  526.         </tr>
  527.       </table>
  528.     </div>
  529.   </body>
  530. </html>
  531.