You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tdewebdev/doc/kimagemapeditor/index.docbook

154 lines
5.2 KiB

<?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>