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]