MW Imagemap

Extension Key: mwimagemap

Copyright 2007, typo3@metaways.de, <typo3@metaways.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents

MW Imagemap	1

Introduction	2

What does it do?	2

Screenshots	2

Users manual	4

Creating/changing an imagemap	4

Defining linked areas on an image	5

Customizing your own border bolors	6

Displaying area borders at the frontend	7

Moving several linked areas at once	8

Putting an imagemap on a page	8

FAQ	9

Configuration	9

Known problems	10

To-Do list	10

Changelog	10

Introduction

What does it do?

The MW Imagemap extension contains a module to create and edit imagemaps, a plugin to include these imagemaps into pages, and an option to apply imagemaps to the content types IMAGE and IMAGE WITH TEXT .

The module allows to upload images or to reuse already uploaded images. Once an image is selected, areas can be defined on this image.

These areas are visually marked up. For each area a link can be associated with.

The plugin shows the image and creates a HTML map, so that the defined areas link to the desired location.

With version 1.1.0 this extension also provides the possiblity to display borders around areas at the frontend.

We tested the plugin with the following OS / browsers:

Windows XP / Firefox 2.0.0.9

Windows XP / Opera 9.21

Windows XP / IE 6,7

Linux / Konqueror 3.5.7

Mac OS 10.4.10 / Safari 2.0.0.9

The development of MW Imagemap was sponsored by Metaways Infosystems.

We would also like to thank Walter Zorn for his wonderful JavaScript Vector Graphics Library. Without it this extension could not have been realised.

Also thanks to Paul Mehrer for making this initially possible, Lars Jakobsen and Christian Mohr for their testing ;-)

Screenshots

Uploading or selecting a image for use as imagemap

Working on an imagemap

Several areas are defined and marked up dynamically on the image in different colors.

This screen shows the complete edit area interface for a polygon example.

Creating a new area or selecting a existing area to edit

Four area shapes are supported: rectangle, circle, polygon and default.

The default area covers everything not covered by an otherwise defined area.

A click on an area pane opens the area for editing. The currently edited area is indicated by a red frame.

Users manual

Creating/changing an imagemap

Select a image from your local filesystem or choose the image of an already existing imagemap.

If no name is given, a name will be generated automatically.

If you want to edit an existing image map simply click on a thumbnail in the list under “EXISTING IMAGE MAPS”.

Defining linked areas on an image

Select the shape of the area ( rectangle, circle, polygon, default ).

If the "description"-field is not filled a description will be generated automatically.

After adding the area, it's size or position can be defined/changed by simply clicking on the image.

For each link it is also possible to add additonal parameters (like onmouseover events).

The whole editing process works dynamically, so the page will not refresh until you have finished working with this area.

Don't forget to hit the “save” button when you are done with editing, otherwise all your changes will be lost!

Customizing your own border bolors

In the area view backend border colors and frontend border colors can be customised by clicking on the small square at the right side of the “Color” field or by directly filling a color-value(hex) in the “Color”-field.

For backend borders it is also possible to assign a color name.

If no color name is given the hex value of the color will be used as it's name.

Customised colors can be confined to single imagemaps or can be used on all other imagemaps.

It is also possible to completely disable color customisation for the backend borders.

See the “Configuration”-section for more details.

Displaying area borders at the frontend

You can choose between three options to display a border at the frontend:

a border should not be visible

a border should always be visible

a border should be visible on mouseover. When “border only visible on mouseover” is selected it is also possible to have one border shown as default when calling a page with the GET-parameter “mwi_area”. E.G. when calling a page like “index.php?id=1&mwi_area=2” this border should be shown by default.

A frontend-border can have it's own border color which need not be the same as the backend border color.

A frontend-border thickness can also be defined.

Moving several linked areas at once

Several linked areas can be moved simultaneously by selecting them in the link area list,
defining x and y values and pressing “move”.

Putting an imagemap on a page

You can insert an image map containing its own image by using the mwimagemap-plugin.

There is also the possibility to apply an image map to the content types IMAGE and IMAGE WITH TEXT. You will find a pulldown with all your imagemaps at the bottom of the IMAGE work-area.

Please note: when using this possibility frontend borders will not be shown!

Only the linked areas will be assignd to the image.

If this option does not show up it is most likely disabled in the extension's configuration.

Please see the section “Configuration” for further details.

Configuration

All configuration options are accessible in the extension's backend in the EM. The following options are available:

disable use with IMAGE: As the possibility of using imagemaps created by mwimagemap makes use of an XCLASS it might disable other plugins trying to use the same class the XCLASS of mwimagemap is using. To avoid this conflict you must disable the feature “use with IMAGE”.

allow adding colors for edit-view: If you do not want a BE user to customize his own colors you should set this to 0.

allow shared use of added colors: If set to “1” customized colors will be available to all imagemaps. This can be problematic when you delete a color as other imagemaps might be affected from that action.

force type of overlay-images: Starting with release 1.1.0 transparent overlay images will be used to display borders at the frontend. By default PNGs are used as overlay images. If you like, you can set this value to “0” (“GIF”). Please note that polygons and circles might look ugly when GIF is used. To have more “antialiased” borders you should use PNG. This setting is overrridden by “automatic overlay”.

automatic overlay: If this is set, overlay images will automatically change to gif if the calling browser is internet eplorer 6 because this browser does not handle transparent PNGs correctly. Overrrides “force type of overlay-images”.

title attribute: a title containing the area's name will be automatically attributed to an area if no title is specified in the link parameters.

In addition to these options up to 10 default border colors can be defined.
The definition of a color has to follow this convention:

HEX-value of a color|lang 1:colorname,lang 2: colorname

For each color you have the possibility to assign as many language versions of its colorname as you like ;-)

The first colorname is the default colorname which is used when no colorname was specified for a current BE language.

If no first colorname is available the HEX value will be the colorname.

Configured colors cannot be deleted by a backend user in the area view.

Known problems

IE 5.5 or earlier versions are not supported! Use Firefox anyway...

Note that when working with the content type IMAGE: If an imagemap is changed the image of the previous imagemap is not removed. It must be removed manually.

The constant PATH_tslib in “ext:mod/index.php” seems sometimes not to work.

If you experience problems with the workaround:

if (@is_dir(PATH_site.'typo3/sysext/cms/tslib/')) {

define('PATH_tslib', PATH_site.'typo3/sysext/cms/tslib/');

} elseif (@is_dir(PATH_site.'tslib/')) {

define('PATH_tslib', PATH_site.'tslib/');

} else {

// define path to tslib/ here:

$configured_tslib_path = '';

// example:

// $configured_tslib_path = '/var/www/mysite/typo3/sysext/cms/tslib/';

define('PATH_tslib', $configured_tslib_path);

}

Feel free to adjust the path.

It occurs in some cases that the Typo3-login does not function any more when mwimagemap is installed.
This happens when the configuration variable $TYPO3_CONF_VARS['BE']['lockIP'] is set to a value smaller than 4. The variable MUST be set to 4! This is due to a bug in Typo3 which prevents creating a BE_USER-object in “ext_tables.php” and a setting $TYPO3_CONF_VARS['BE']['lockIP'] < 4 at the same time. We hope to provide Typo3 with an appropriate patch sometime in February 08.

To-Do list

This is what probably will find its way into the next main release:

Fixes for some bugs that will almost inevitably pop up ;-)

Possibilty to also change general map settings in the area view

Possibility to change an area shape on the fly (e.g. to change from “rectangle” to “polygon”)

Changelog

Version	Description
1.0.0.	Initial version (beta)
1.0.1	updated documentation fixed compatibility issue with extension "tt_news"
1.0.2	updated documentation
1.0.3	added 'border=”0”' to image tag when inserted as plugin
1.0.4	added '#' to usemap attribute for the content type IMAGE
1.0.5	possibility to add/edit additional link parameters “alt”-attribute is added automatically to an area in case no alt attribute was specified notification on unsaved changes
1.0.6	shy set to 0 path ajusted to Typo3 4.0 problems with non administrator backend users fixed
1.0.7	Moved from the web section to the file section for easy user management by limiting access to file mounts added resizing rectangles and circles by dragging added moving areas by x and y offset added uploading new image for existing imagemap added area shape „default“
1.0.8 + 1.0.9 + 1.0.10	Several minor Bugfixes
1.0.11	Removed unwanted line feed when used with IMAGE or IMAGE WITH TEXT (to cope with an annoying IE 6.x behaviour)
1.0.12	Fixed wrong User accessibility (thanks to Jürgen Kußmann) Fixed path to system icons (thanks to Jürgen Kußmann)
1.0.13	Mouse position display added
1.0.14	Thumbnails are now stored in typo3temp/ty_imagemap/ Missing thumbnails are generated automatically fixed bug with the linkbrowser: Files can now be selected fixed problem with FE rendering when BE cache is empty
1.0.15	Finally declared stable ;-)
1.0.16	Added Possibility to use images from the filesystem When used with the content types IMAGE and IMAGE WITH TEXT the related images are now inserted automatically.
1.0.17	XHTML-compatibility added id attribute ( id/name = "map_#UID#" ) to the the „map“-tag added alt attribute to “img”-tag if imagemap is applied as plugin
1.0.18	Replaced php short open tag by „<?php“ in file „constants.php“
1.0.19	Minor documentation updates Imagemap names are now sorted alphabetically in the backend dropdown when used as a plugin (Thanks to Andreas Wolf for the hint).
1.0.20	Backend: corrected path display Backend: generating alternative thumbnail-pngs (for php-versions without gif-support) Backend: localization of the "Move"-Button
1.1.0	Because of the many changes we downgraded the extension to beta again Frontend: Switch from single image to overlay-background-display in order to provide the possibility to show borders. Frontend: area borders can be displayed permanently or on mouseover Frontend: A „title“-attribute can be displayed if none was specified Backend: thumbnail creation is now done by imagemagick and only in jpg to provide higher quality thumbnails in the overview. Backend: default border colors and other configuration options from the extension backend (see section „configuration“ for more details) Backend: customizable colors Backend: New user interface (collapsable panes etc.) Backend: Possibility to set border display. Various bugfixes (Thanks to Stefan Galinski for providing us with a patch to correct a problem with the formsonpage mode in the frontend editing mode and some TCA-enhancements!)
1.1.1	Frontend: Fixed Bug with mouseover effects with several imagemaps Frontend: removed „border“-attribute from overlay images for better compatibility to XHTML strict Backend: Fixed incorrect queries in "ext_tables.sql" (Thanks to Stefan Galinski for that) Some other minor bugfixes Improved documentation
1.1.2	Frontend: removed some debug information from the frontend output Improved documentation
1.1.3	Minor bugfixes Improved documentation
1.1.4	Fixed one „allow_call_time_pass_reference“-annoyance Fixed error on not referenced DB object when deleting an imagemap Some other minor bugfixes Improved documentation new icons ;-)
1.1.5	code cleanup Backend: Adapted to graphicsmagick ($TYPO3_CONF_VARS['GFX']['im_version_5'] must be set to "gm" otherwise gm will not be recognised by the plugin) Frontend: Automatic switch from png-overlay to gif-overlay if the browser is IE6 Backend: Onclick editing/adding points is now possible again for polygons (got somehow lost in the change process) updated documentation
1.1.6	Minor bugfixes updated documentation
1.1.7	Backend: Fixed problem with permanent frontend borders Backend: Fixed problem with creation of new areas Backend: Fixed problem with circle positioning Frontend: No more use of overlay images when no frontend border is defined (printer friendly!)
1.1.8	Backend: Editing of the FE-plugin's content title enabled. Backend: Found a solution for the automatic logout which sometimes happened when MW Imagemap was installed – please refer to „known problems“ for more information on this issue (Thanks to Ralf Thierfelder for providing one of his Typo3-sites as a testbed for this problem). Backend: Replaced all „locallang.php“ files by „locallang.xml“ files. Frontend: By using the GET parameter „mwi_area“ a mouseover-border can be shown by default. Please refer to the section „Displaying area borders at the frontend“ for more information. updated documentation
1.1.9	Fixed problem with wrong reference to "locallang.php" in "class.tx_mwimagemap_pi1_wizicon.php" - should have been "locallang.xml"

MW Imagemap - 11

MW Imagemap

Kasper Skårhøj

2002-11-01T00:32:00

Kasper Skårhøj