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.
154 lines
5.2 KiB
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ä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>
|