summaryrefslogtreecommitdiffstats
path: root/doc
diff options
context:
space:
mode:
Diffstat (limited to 'doc')
-rw-r--r--doc/kimagemapeditor/Makefile.am2
-rw-r--r--doc/kimagemapeditor/configure.pngbin0 -> 14520 bytes
-rw-r--r--doc/kimagemapeditor/index.docbook153
-rw-r--r--doc/kimagemapeditor/mainwindow.pngbin0 -> 126488 bytes
4 files changed, 155 insertions, 0 deletions
diff --git a/doc/kimagemapeditor/Makefile.am b/doc/kimagemapeditor/Makefile.am
new file mode 100644
index 00000000..e97402c7
--- /dev/null
+++ b/doc/kimagemapeditor/Makefile.am
@@ -0,0 +1,2 @@
+KDE_DOCS = AUTO
+KDE_LANG = en
diff --git a/doc/kimagemapeditor/configure.png b/doc/kimagemapeditor/configure.png
new file mode 100644
index 00000000..a90a70e7
--- /dev/null
+++ b/doc/kimagemapeditor/configure.png
Binary files differ
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&auml;fer</surname>
+</author>
+<author>&tde-authors;</author>
+<!-- TRANS:ROLES_OF_TRANSLATORS -->
+</authorgroup>
+
+<copyright>
+<year>2007</year>
+<holder>Jan Sch&auml;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>
diff --git a/doc/kimagemapeditor/mainwindow.png b/doc/kimagemapeditor/mainwindow.png
new file mode 100644
index 00000000..e32f7726
--- /dev/null
+++ b/doc/kimagemapeditor/mainwindow.png
Binary files differ