How To... Build an Image Map
Don't use the map option under image properties in the text editor - use this variation of a LIST tag instead.
Use a manual LIST and enter the coordinates in the Comment field of each item. This way you can exert greater control over the links.
First of all build a snippet, in this example called 'image_map', that provides a method of uploading the image to be used, and a list that will determine the coordinates and links of the destination pages.
Ensure the component referencing this snippet has the 'noteditable' attribute set to 'no':
New snippet is called 'image_map'
%VISUAL(usemap=#photospot)%
%LIST(type=map, id=photospot, name=photospot, itemtemplate=map_coords)
(Note how the visual and list are tied together using the 'Usemap' and 'id' properties of the tags)
The itemtemplate of the above snippet is called 'map_coords', and looks like this:
RENDERED OUTPUT
<area href="%LINK%" alt="%TITLE%" title="%TITLE%" shape="rect" coords="%CAPTION%" />
Now we can see how the CAPTION (derived from the 'Comment' field) from the list is used to hold the coordinates for each item. This way, when a page is removed it is also automatically removed from the clickable map.
This is the only way to build a proper manageable image map!
