Creating Image Maps in Joomla

Standard

Photo By cocoate.com

Lately I’ve been working on some joomla sites for some friends and in one of the sites my friend wanted to add an imagemap. So I started researching what was the best way to go about doing this in a joomla site. I even posted a question in Stackoverflow. Well my search lead me here, it is a plugin for the default editor(TinyMCE) included in joomla that adds the ability to create and modify image maps in articles. After following the instructions on that page I still couldn’t see the image map button on the TinyMCE toolbar. I found some installation instructions within the downloaded package and they didn’t match the ones on the page, so I decided to give those a try, but there were some problems.

These are the instructions from the page referenced above:

    1. copy files from plugin_tinymce{x}.zip to {yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/
    2. edit {yourjoomlainstance}/plugins/editors/tinymce.xml, after ‘directionality’ add lines:


<param name="imgmap" type="radio" default="1" label="Imagemap" description="Imagemap">

<option value=”0″>Hide</option>

<option value=”1″>Show</option>

</param>

    1. edit {yourjoomlainstance}/plugins/editors/tinymce.php, after ‘XHTMLxtras’ add lines:


if ( $imgmap ) {

$plugins[]      = ‘imgmap’;

$buttons3[]     = ‘imgmap’;

$elements[]     = ‘img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]’;

}

  1. go to Joomla admin/Plugin manager/Editor – TinyMCE 2.0/Advanced Parameters, and make sure Imagemap is set to Show.
  2. go to article editor, click on any image, and notice the button highlighted on the toolbar, you are done:)

These are the instructions found within the downloaded package:

    1. copy files to plugins/imgmap/
    1. set up your instance in the tinyMCE.init method to use the plugin, like:
      plugins : “table,save,advhr,advimage,imgmap,…”,
    1. set up your instance to use the imgmap button, for example:
      theme_advanced_buttons3_add : “emotions,iespell,…,imgmap”,
    1. you might need to add:
      extended_valid_elements : “img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]”,

Ok so I had done the first step since I had already done the five ste.s. I never found the tinyMCE.init mentioned in the second step so I decided to skip the step. I didn’t understand where I was supposed to make the change mentioned in the third step so I decided to skip it as well. The parameter mentioned in the fourth step took a while to figure out, but I finally found it by going to Plugin Manager–>Editor – TinyMCE and it is in the Plugin Parameters(below is a screenshot).

After doing this last step I finally got the image map button to show on my TinyMCE toolbar.

In conclusion, to get this to work I had to use a combination of both instructions. The actual instructions should be:

    1. Copy files to plugins/imgmap/
    1. Edit {yourjoomlainstance}/plugins/editors/tinymce.xml, after ‘directionality’ add lines:


<param name="imgmap" type="radio" default="1" label="Imagemap" description="Imagemap">

<option value=”0″>Hide</option>

<option value=”1″>Show</option>

</param>

    1. Edit {yourjoomlainstance}/plugins/editors/tinymce.php, after ‘XHTMLxtras’ add lines:


if ( $imgmap ) {

$plugins[]      = ‘imgmap’;

$buttons3[]     = ‘imgmap’;

$elements[]     = ‘img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]’;

}

  1. Add the following to the “Extended Valid Elements” parameter:
    img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]

5 thoughts on “Creating Image Maps in Joomla

  1. Sorry, followed these steps to the letter, both for Tiny 2 and Tiny 3 and couldn't get it. All I want is to be able to paste my own HTML image map, hand-coded myself, into an article in Article Manager, click Save, and have it work. I don't understand why image maps, which have been around since HTML 1 or 2, are so VERY difficult with Joomla. Any other advice appreciated.

  2. Totally agree with you, this was too much work to get a simple thing like imagemaps to work in joomla.

    To be able to paste a hand-coded imagemap into the editor and have it work, you can try two things:
    1. disable the "code cleanup" TinyMCE parameter, but I've read this causes other issues for some users.
    2. use no editor as your default editor.

    Hope this helps

  3. Cal

    Hello – I come across your post today, i'm having trouble getting joomla 3.x to upload .map for my image map. I have JCE but it still won't show the image just a white square. have you any ideas ?
    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *