diff options
Diffstat (limited to 'doc/kimagemapeditor/index.docbook')
| -rw-r--r-- | doc/kimagemapeditor/index.docbook | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/doc/kimagemapeditor/index.docbook b/doc/kimagemapeditor/index.docbook new file mode 100644 index 00000000..e9d320d7 --- /dev/null +++ b/doc/kimagemapeditor/index.docbook @@ -0,0 +1,153 @@ +<?xml version="1.0" ?> + <!DOCTYPE article PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd" [ + <!ENTITY kimagemapeditor "<application>KImageMapEditor</application>"> + <!ENTITY kappname "&kimagemapeditor;"> + <!ENTITY package "tdewebdev"> + <!ENTITY % addindex "IGNORE"> + <!ENTITY % English "INCLUDE"> +]> + +<article id="kimagemapeditor" lang="&language;"> + +<articleinfo> +<title>The &kimagemapeditor; Handbook</title> + +<authorgroup> +<author> +<firstname>Jan</firstname> +<surname>Schäfer</surname> +</author> +<author>&tde-authors;</author> +<!-- TRANS:ROLES_OF_TRANSLATORS --> +</authorgroup> + +<copyright> +<year>2007</year> +<holder>Jan Schäfer</holder> +</copyright> +<copyright> +<year>&tde-copyright-date;</year> +<holder>&tde-team;</holder> +</copyright> + +<date>&tde-release-date;</date> +<releaseinfo>&tde-release-version;</releaseinfo> + +<abstract> +<para> +&kimagemapeditor; is an &HTML; image map editor for &tde;. +</para> +</abstract> + +<keywordset> +<keyword>TDE</keyword> +<keyword>image map editor</keyword> +<keyword>image map</keyword> +<keyword>usemap</keyword> +<keyword>tdewebdev</keyword> +<keyword>html</keyword> +</keywordset> + +<legalnotice>&underFDL;</legalnotice> + +</articleinfo> + +<!-- <chapter id="using"> --> +<!-- <title>Using &kimagemapeditor;</title> --> + +<para> +&kimagemapeditor; is an &HTML; image map editor for &tde; that helps create and modify &HTML; <ulink url="http://en.wikipedia.org/wiki/Imagemap">image maps.</ulink> +</para> + +<screenshot> +<screeninfo>Here's a screenshot of &kimagemapeditor;</screeninfo> + <mediaobject> + <imageobject> + <imagedata fileref="mainwindow.png" format="PNG"/> + </imageobject> + <textobject> + <phrase>Screenshot</phrase> + </textobject> + <caption> + <para> + &kimagemapeditor; main window. + </para> + </caption> + </mediaobject> +</screenshot> + +<para>A common use case is a world map where each country is an image map. +By clicking on a country in the map you can open a link to the selected +country.</para> + +<para>Creating an image map requires the following steps:</para> + +<para>Load an image file (<filename class="extension">png</filename>, +<filename class="extension">jpg</filename>, <filename class="extension">gif</filename>) +or a &HTML; file from your disk or drag into the image area. When multiple images are loaded, +then select the desired image from the <guilabel>Images</guilabel> list tab in the docker.</para> + +<para>Add a image map using <menuchoice><guimenu>Map</guimenu><guimenuitem>New +Map</guimenuitem></menuchoice> from the menu and enter a map name.</para> + +<para>Now the <guimenu>Tools</guimenu> menu is enabled. Select the appropriate geometric +shape like <guimenuitem>Circle</guimenuitem>, +<guimenuitem>Rectangle</guimenuitem>, <guimenuitem>Polygon</guimenuitem> or +<guimenuitem>Freehand Polygon</guimenuitem> and define a clickable area in +the image.</para> + +<para>The <guilabel>Area Tag Editor</guilabel> dialog is displayed. On the <guilabel>General</guilabel> +tab enter the attributes <guilabel>HREF</guilabel> (a link's target &URL;), <guilabel>Alt.Text</guilabel>, +<guilabel>Target</guilabel> and <guilabel>Title</guilabel>.</para> + +<para>The <guilabel>Coordinates</guilabel> tab shows the geometric data of the shape. +Editing the value allows you to adjust size and position on the image as your changes +are immediately visible in the image. Size and position can be altered using the mouse +as well.</para> + +<!--para>JavaScript tab Enter name of funtions defined where? for actions</para--> + +<para>To open the <guilabel>Area Tag Editor</guilabel> dialog for an already defined +image map use <guimenuitem>Properties</guimenuitem> from the <guimenu>Edit</guimenu> +menu or the context menu of the region.</para> + +<para>Use <menuchoice><guimenu>Map</guimenu><guimenuitem>Show HTML</guimenuitem></menuchoice> +to view the generated &HTML; code of the map.</para> + +<para>Next open <menuchoice><guimenu>Image</guimenu><guimenuitem>Edit Usemap...</guimenuitem></menuchoice> +and enter the map name as usemap value. Save your work with <menuchoice><guimenu>File</guimenu> +<guimenuitem>Save</guimenuitem></menuchoice>. Open the &HTML; file in &konqueror; to verify that +the image map is working as expected.</para> + +<!-- +Map-Preview is empty? + + Draft of Howto create an image map + 1) Load Image (png/jpg/gif) or html file + 2) Tools Circle Rectangle Polygon to define an area + 3) Area Tag Editor (Property from context menu) Link+AltTag+..., Coordinates, JavaScript + 4) Map->Show HTMl to view the html code of the map +--> +<para> + Configuration options of &kimagemapeditor; can be accessed by opening the configuration dialog with selecting <menuchoice> <guimenu>Settings</guimenu> <guimenuitem>Configure &kimagemapeditor;...</guimenuitem> </menuchoice> from the menu. +</para> +<screenshot> +<screeninfo>Configuration dialog of &kimagemapeditor;</screeninfo> + <mediaobject> + <imageobject> + <imagedata fileref="configure.png" format="PNG"/> + </imageobject> + <textobject> + <phrase>Configuration dialog of &kimagemapeditor;</phrase> + </textobject> + <caption> + <para> + Configuration dialog of &kimagemapeditor;. + </para> + </caption> + </mediaobject> +</screenshot> + +<!-- </chapter> --> + +</article> |