Platinum sponsors
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.
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.
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.
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.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.
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!!
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.
