EXT: Image Wizard

Author:Kasper Skårhøj
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:forEditors, forAdmins, forIntermediates
Author:Tolleiv Nietsch
Info 4:

img-1 img-2 EXT: Image Wizard - imagemap_wizard

EXT: Image Wizard

Extension Key: imagemap_wizard

Language: en

Keywords: forEditors, forAdmins, forIntermediates

Copyright 2000-2000, Tolleiv Nietsch, <extensions@tolleiv.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.org

Table of Contents

EXT: Image Wizard 1

`Introduction 3 <#__RefHeading__440_148023813>`_

What does it do? 3

Screenshots 4

`Users manual 5 <#__RefHeading__446_148023813>`_

Point & Click Operations 5

Form Options 5

Rectangle specific options 6

Circle specific options 6

Polygon specific options 7

`Administration 8 <#__RefHeading__458_148023813>`_

Imagemap Wizard within Flexforms 8

`Configuration 10 <#__RefHeading__462_148023813>`_

`Known problems 11 <#__RefHeading__464_148023813>`_

`FAQ 12 <#__RefHeading__466_148023813>`_

`To-Do list 13 <#__RefHeading__468_148023813>`_

`ChangeLog 14 <#__RefHeading__470_148023813>`_


What does it do?

The Imagemap Wizard provides an easy and intuitive way to create and edit Imagemaps in TYPO3. It works without XCLASSes or anything else that prevents people to Update their TYPO3, it reports-back to the Reference-Index and supports workspaces.

The extension enables a seamless integration into TYPO3, it adds a new Content-Element which is build on the top of the common image element. Therefore every extension for the default elements will also work for the Imagemap Content-Elements.


Users manual

When the extension was installed properly you can create imagemaps like every other content-element just choose the “ImageMap” Entry in the “New Elements” Wizard.


After you created the element you should upload a image and save the element. The wizard doesn't support multiple images per record. If your image was uploaded (or properly linked to the record) then you'll see a preview on the “Media” tab und “Imagemap Configuration” - just click on the Wizard-Icon to open the Imagemap-Wizard.

In the Wizard you'll see the image just as if it would be rendered in the Frontend so all the filters and manipulation you choosed for the record are applied. If the image is too large for the wizard – it is scaled down to fit the Wizard-Popup you'll find a zoom-out button to undo this scaling. Editing areas is not effected by the scaling.

Adding new linked area is easy just click either “Add Rect-Area”, “Add Circ-Area” or “Add Poly-Area” and a new area will be placed on the image and a corresponding form-area is added below the image.

Point & Click Operations

img-6 After you added a new area you'll see this area on your picture as well. You have several options to edit the shape and position of your area.

If you just click on the border of your area you can drag this object with you mouse without modifying the size or shape of the area itself.

You'll also see some white edges which are also dragable. These edges help you to modify the shape of the area. In the sections below you'll find a more detailed explanation regarding the shape-specific options – basically the edges just correspond to these specific options.

For Polygon shapes there's another special option – if you double click on the border of your polygon you'll add a new edge to the polygon.

Form Options

Within the form you're able to edit all related options for an area. Each form contains at least a link-field, a label-field and a color- field.

  • The link-field just takes typolink parameters as input and it also provides the possibility to open a link-wizard
  • The label-field is used as Alt-Attribute in the resulting HTML and should therefore contain some additional information about the marked area so that accessibility is raised.
  • The color-field is only relevant for the TYPO3-backend, it's value is not published. This field is only used to make identification of areas easier.

All other options within the forms are shape-specific and described below.

The forms also provide a sort-option. You can either use the up- and down-buttons or you can easily Drag&Drop the forms directly to change the sort-order. The sort-order was first implemented for usability reason – new forms are always added as top-most elements in the list – but it is also used to determine the order of the rendered areas therefor the topmost area overlays other areas in the generated HTML as well.

img-7 img-8 To edit shape-specific options it's needed to click on the arrow at the right (same button is used to collapse the additional options). The additional options always provide the possibility to update the used coordinates manually. To apply such changes just click the refresh-button – the outlines on the picture will reflect your changes immediately.

Rectangle specific options

The rectangle is the most basic shape, it is defined by the coordinates of two opposite edges (upper left and lower right edges). To modify these values you can either drag one of the edge-markers in the wizard or you can manually update the values within the additional form options.


Circle specific options

The circle is a bit more complex but required less configuration. It is defined by the coordinates of the center point and a radius around this point. The center point allows you to drag the circle around and the edges which sit on the circle itself just help the define the radius.

!! Standard (X)HTML doesn't support elliptical shapes – therefore such shapes need to be formed polygones!!


Polygon specific options

Polygons offer the biggest complexity. They are defined by three or more edges whereas each edge is connected to it's neighbor and the last edge is connected to the first so that the shape is closed.

Editing polygons is very similar to the other two shapes, the only difference is that the number of edges is flexible and therefore the amount to editable coordinated is flexible as well. The form for polygons offers three ways to add new edges you can either double click on the shape itself – edge is added to the exact position – , use the “plus-button” to add a new edge – which is then appended to the list of edges – or you can use the “add before” or “add after” button in the additional form options area to place new edges at a specific position. Removing edges can be done in two different ways – either you can use the form or you double click one a edge of the polygone.



  • Install the extension like every other extension in the EM. A database column is added to the tt_content table and the TYPO3-Conf-Cache if cleared. After this was done the ImageMap content element should be available.
  • The extension required the css_styled_content extension otherwise the integration and Frontend-preview won't work.
  • The extension is tied into css_styles_content and applying the imagemap is “just” a postUserFunc ( tt_content.imagemap_wizard.20.1.stdWrap.postUserFunc) with these options:




Data type



Used to determine the name-attribute of the generated imagemap


Imagemap Wizard within Flexforms

  • Since version 0.5 there's abasic support for flexform usage.
  • A sample flexform field-definition for the image and the imagemap- field could look like this (taken from aTemplaVoila DataStructure):

<el type="array"><field_image type="array"><tx_templavoila type="array"><title>Image</title><sample_data type="array"><numIndex index="0"></numIndex></sample_data><eType>image</eType><TypoScript><! [CDATA[10 = IMAGE10.file.import = uploads/tx_templavoila/10.file.import.current = 110.file.import.listNum = 010.params < tt_content.imagemap_wizard.20.1.params10.stdWrap.postUserFunc = tx_imagemapwizard_parser->applyImageMap 10.stdWrap.postUserFunc.map.data = field:field_imagemap10.stdWrap.postUserFunc.map.name = register:tx_t emplavoila_pi1.parentRec.header10.stdWrap.postUserFunc.map.name.crop = 2010.stdWrap.postUserFunc.map.name.case = lower]]></TypoScript></tx_templavoila><TCEforms type="array"><config type="array"><type>group</type><internal_type>file</internal_type><a llowed>gif,png,jpg,jpeg</allowed><max_size>1000</max_size><uploadfol der>uploads/tx_templavoila</uploadfolder><show_thumbs>1</show_thumb s><size>1</size><maxitems>1</maxitems><minitems>0</minitems></config>< label>Image</label></TCEforms></field_image><field_imagemap type="array"><tx_templavoila type="array"><title>Imagemap Setup</title><sample_data type="array"><numIndex index="0"></numIndex ></sample_data><eType>image</eType></tx_templavoila><TCEforms type="array"><config type="array"><type>user</type><userFunc>tx_image mapwizard_controller_wizard->renderForm</userFunc><userImage><field> field_image</field><uploadfolder>uploads/tx_templavoila</uploadfolde r></userImage><wizards type="array"><imagemap type="array"><type>popup </type><script>EXT:imagemap_wizard/wizard.php</script><title>ImageMap </title> <JsopenParams>height=700,width=780,status=0,menubar=0,scrollb ars=1</JSopenParams><icon>link_popup.gif</icon></imagemap></wizards>< /config><label>Imagemap Setup</label></TCEforms><type>no_map</type></field_imagemap></el>


  • Basically no configuration is required this extension should work out of the box.
  • You're able to configure the maximal width/height for the preview- image and you're also able to configure the optimal width/height for the image in the popup (see image-scaling)
  • You're able to configure additional attributes for the imagemap- area's (very common: title, onclick, onmouseover).These additional attributes appear within the additional options for each area:

img-12 additional title and onmouseover attribute

Known problems

Using the imagemap_wizard content-element on pages with doktype “recycle”, “shortcut” or “sysfolder” might cause problems since the frontend-preview won't render on these pages.


My imagemage is not working within Internet Explorer 6 or older

Please check whether you use a transparent PNG (+*.htc or Javascript fix) this might be the reason why IE6 reacts stupid. You might want to check out: http://homepage.ntlworld.com/bobosola/pnginfo.htm#maps

To-Do list

  • Admin-Mode will be added soon
  • Some more configuration-options are required
  • Much more configuration and examples are required here :P
  • Migrator function to move from mw_imagemap to imagemap_wizard


  • 0.5.6 Compatibility fixes for newer TYPO3 versions (sprites, deprecated functions replaced)
  • 0.5.5 Userinterface improvements, TYPO3 4.3 compatibility improvements. “use within common elements” feature enabled (works only for the first image of the elements).
  • 0.5.4 IE6-IE8 compatibility (#5188), Imagemap-Review is rendered on access-restricted pages now (#5139), wz_jsgraphics v. 3.0.5 is used now
  • 0.5.3 TYPO3 Compatibility changes, bugfixes – thanks to Pim Snel (#4672)
  • 0.5.2 Extension is now shipped with minified JS only – JS sources are available in SVN
  • 0.5.1 jQuery update to 1.3.2, Implemented first version of the UNDO / REDO feature
  • 0.5.0 Wirzard can be used within Flexforms as well
  • 0.4.2 UI changes and bugfixes – see forge.typo3.org for details
  • 0.4.1 improved tooptip when IM is saved small bug fixes and additional TypoScript options
  • 0.4.0 TER Version – documentation updated and code cleaned
  • 0.3.7 removed major bug with special characters within attribute values
  • 0.3.6 add additional attributes
  • 0.3.4 add and remove polygon-edges by double-click
  • 0.3.2 refactored some parts, added few configuration options and removed bugs that were introduced with the scaling
  • 0.3.0 Scaling images added – large images are scaled down to fit the wizard-size.
  • 0.2.3 Bugfixes – for valid HTML and PHP code, TYPO3 integration and usability see forge.typo3.org for details.
  • 0.2.0 Added the possibility to drag objects just by clicking on their border, added the possibility to add new edges to polygons with double clicks
  • 0.1.2 Removed some more compatibility-problems with 4.x versions, added Locallang-labels, tiny UI-improvements and updated this manual
  • 0.1.1 Compatibility-Fixes for TYPO3 4.1.x and 4.0.x ...
  • 0.1.0 Initial TER upload – Imagemap-Wizard with support for Workspaces, Rectangle-, Circle- and Polygon-Shapes, Refindex-Reports and XCLASS-free integration.