Skip to Content

Full credit to stevem for the original tip.

If you want to allow users to create their own clickable hotspots with imagemaps in Drupal, there's a very easy solution.

1. Install the pre-requisites

  • Install the WYSIWYG module
  • Download TinyMCE and install it at <drupalroot>/sites/all/libraries/tinymce
  • Setup your WYSIWYG profile http://<yoursite>/admin/settings/wysiwyg

At this point, check that you can see the WYSIWYG editor when you edit a page.

  • Download the imgmap plugin for TinyMCE and install at <drupalroot>/sites/all/modules/tinymce/jscripts/tiny_mce/plugins/imgmap

2. Create a simple custom module to enable the imgmap plugin

Rather than modifying the WYSIWYG plugin or editing the TinyMCE files directly, you can use hook_wysiwyg_plugin to add the imgmap plugin to TinyMCE at runtime. The genius of Drupal hooks strikes again!

<drupalroot>/sites/all/modules/custom/tinymce_imgmap/tinymce_imgmap.module

<?php
/**
* Implementation of hook_wywiwyg_plugin().
*/
function tinymce_imgmap_wysiwyg_plugin($editor, $version=0) {
  $plugins = array();
  switch ($editor) {
    case 'tinymce':
      if ($version > 3) {
          $plugins['imgmap'] = array(
          'type' => 'external',
          'title' => t('ImageMap'),
          'description' => t('Edit ImageMaps through WYSIWYG'),
          'path' => wysiwyg_get_path($editor) . '/jscripts/tiny_mce/plugins/img\
map/editor_plugin.js',
          'buttons' => array(
            'imgmap' => t('imgmap'),
           ),
           'url' => '#',
           'load' => TRUE,
        );
      }
      break;
  }
  return $plugins;
}
?>

<drupalroot>/sites/all/modules/custom/tinymce_imgmap/tinymce_imgmap.info

name = TinyMCE Imgmap support
package = Wysiwyg
description = Add Imgmap plugin to TinyMCE/Wysiwyg
core = 6.x

3. Enable your new module!

And away you go. You should now see the imgmap button when you edit your pages with the WYSIWYG editor. Insert an image into the editor, select it and then click the imgmap button to bring up the Image Map editor. Huzzah!

The imagemap button

The Imagemap button

The imagemap editing screenImage Map editing using the imgmap plugin for TinyMCE