EXT: MW Imagemap¶

What does it do?¶

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

Imagemaps are created in a backend module which is located unter “file” or under “Tools” when it is integrated into DAM. Images from a subdirectory under “fileadmin” can be used for imagemaps and it's also possible to upload new images for an imagemap. All imagemaps are edited in a wysiwyg mode.

Screenshots¶

Uploading or selecting an image for use in an imagemap:

Working with an imagemap

Several areas can be defined and marked up on the image in different colors.

The following screen shows parts of the area editor for a polygon.

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 in the list opens this area for editing.The currently edited area is indicated by a red frame.

Creating/Changing an imagemap¶

Creating an imagemap is quite easy:

• select the “imagemap” module which can be found under “file”
• select a directory where the imagemap should be created
• select an image -either by upload or by chosing an image from the selected directory.
• Give the imagemap a name. If the “imagemap name” field is left blank a name will be assigned automatically, when the imagemap is added.

In the overview some options to change an imagemap are also available:

• The imagemap's name can be changed
• A new image can be uploaded for an imagemap
• The imagemap can be deleted

Adding linked areas to an imagemap¶

Adding a linked area is also quite easy:

• Under “ADD LINK AREA” just chose the area type. 4 types of areas are available:

  • recgtangle
  • circle
  • polygon
  • default

  An area's type cannot be changed after it has been added!

• Give your area a description. If this field is left blank, a description will be assigned automatically when the area is added.

• Assign a link to your area. This field can be left blank when the area is added.

After a linked area is added, a lot more editing possibilites will be available for finetuning it:

• It is possible to add more parameters to an area's link
• The shape and the position of an area can be modified
• Borders and behaviour of an area can be modified.

Customizing the borders of areas ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

It is sometimes desired to have borders around linked areas. MW Imagemap provides the possibility to modify four aspects of borders:

• The frontend border color

• The backend border color

• The border thickness (in pixels)

  

• whether or not the border should be displayed on mouseover only or visible permanently.

Repositioning several areas at once¶

In the area list (at the bottom of the area edit interface) several areas can be moved to another position by selecting the checkbox of each area to be moved and then setting the values for x-ward and y-ward movement. After hitting the “move”-button the areas are repositioned.

Displaying a content box¶

Content boxes are boxes which can contain any TYPO3-content from a page and which are assigned to a specific area. Content boxes will be shown when the mouse moves over an area. A content box must be activated, otherwise it will not show up at the frontend.

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 (See the section “configuration for more details).

Integrating MW Imagemap into DAM¶

DAM integration of MW Imagemap is quite easy if you follow these steps:

• Install DAM

• Then install MW Imagemap AFTER DAM. This installation sequence of both plugins is important because only then MW Imagemap recognizes the DAM environment and can integrate itself into DAM.If DAM ist installed after MW Imagemap it suffices to uninstall MW Imagemap and immediately reinstall it.

  

• Once both extensions are installed in the specified order the whole TYPO3 backend must be reloaded or you also can log out and immediately log in again to see MW Imagemap integrated into DAM:

Configuration options in the extension manager¶

A lot of configuration options are accessible in the extension's backend in the EM. The following configuration directives can be set:

• 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.
• Clear page cache when changing data: If set to “1” the frontend page cache will be automatically cleared when an imagemap is changed.

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.

Typoscript-options¶

Frontend Javascript¶

With version 1.2.14 all frontend mouseover effects are put into an external javascript so that it should be quite easy to change the behaviour of linked areas (and the content box) as you see fit.The following functions are necessary. If they lack, javascript errors will occur.

Using the hook¶

This is for coders only:From version 1.2.8 of MW Imagemap a hook is available to apply your own changes to it's frontend-output before it is passed on to TYPO3.All you have to to is creating a frontend-plugin of your own and do the following steps:

• This directive needs to be in your “ext_localconf.php”:$GLOBALS['TYPO 3_CONF_VARS']['EXTCONF']['mwimagemap']['hook'][] = 'EXT:your_plugin/class.your_plugin.php:tx_your_plugin'
• Then of course you need a script “class.your_plugin.php” which contains the class “tx_your_plugin”
• This class needs only one method:function additionalMarkerProcessor($obj) { }.This method is called automatically when registered via “ext_localconf.php” (the first step).The parameter “$obj” is the imagemap object which you can manipulate as you see fit.To get an overview of what can be manipulated just look into the sourcode of the class “EXT:/mwimagemap/pi1/class.tx_mwimagemap_pi1.php”.

1.0.0¶

1.01 – 1.0.20¶

1.1.0 – 1.2.5¶

1.2.6 – 1.2.8¶

1.2.9¶

1.2.10¶

1.2.11¶

1.2.12¶

1.2.13¶

1.2.14¶

1.2.15¶

1.2.16¶