blob: e9d320d766847f7d5b41de2e7d5f5635542baccb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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>
|
