Edit online

Implementing Image Map Support in a Custom Framework

This topic describes how the rendering and editing of image maps can be implemented in a custom framework. This implementation will require the following:

Write some CSS to configure the rendering of the image map.
Write Java classes to work with the custom image map format.
Write JavaScript code to enable the web-based image map editor.

Rendering Image Maps

To render an image map, you can add a form control on the image element. The form control should have the following properties:

webappRendererClassName should be set to ro.sync.ecss.webapp.formcontrols.WebappImageMapRenderer.
imageUrl should be set to the (possibly relative) URL of the image.
imageMapSupportFactory should be the name of a Java class in your framework that implements ro.sync.ecss.extensions.api.webapp.imagemap.WebappImageMapSupportFactory. Its purpose is to decode the shapes from the document markup.

Rendering Image Maps for XHTML

img[usemap] {
  content: oxy_editor(
    webappRendererClassName, "ro.sync.ecss.webapp.formcontrols.WebappImageMapRenderer"
    edit, "custom",
    imageUrl, attr(src),
    imageMapSupportFactory, "ro.sync.ecss.extensions.xhtml.XHTMLWebappImageMapSupportFactory");
}

Editing Image Maps

To edit an image map, you can instantiate sync.api.EditImageMapAction and register it in the ActionsManager. The second parameter of the constructor should be a Java class in your framework that extends ro.sync.ecss.extensions.commons.imagemap.operations.UpdateImageMapOperationBase.

Action to Edit Image Maps for XHTML

editor.getActionsManager().registerAction('edit.image.map',
  new sync.api.EditImageMapAction(
    editor.getEditingSupport(),
    'ro.sync.ecss.extensions.xhtml.XHTMLUpdateImageMapOperation'));

This action can be linked to a button form control added to the image map element.

Button Form Control to Launch the Image Map Editor

img[usemap]:after(2){
  display:block;
  content:oxy_button(actionID, 'edit.image.map'); 
}