Updated Jul 25, 2009 by adam.maschek
Labels:	Featured, Phase-Deploy

Joomla_setup

How to set up image map editor for joomla

Introduction

Everything below was tried out with Joomla 1.5.4. By default Joomla uses TinyMCE 2.x so the basics are the same as for the TinyMCE_setup.

UPDATE: Newer Joomla use TinyMCE 3.x and the installation is much simpler. Read steps below.

Joomla can also work with FCKeditor, please read Joomla_FCK_setup.

Details

New Joomla (Version 1.5.12 for example)

copy files from plugin_tinymce3{x}.zip to {yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/
go to Joomla admin/Plugin manager/Editor - TinyMCE/Advanced Parameters, and enter imgmap in both Custom plugin and Custom button input fields. Make sure functionality parameter is set to extended.
Launch up your article editor, and you are ready to use the plugin.

Older Joomla (Version 1.5.4 for example)

copy files from plugin_tinymce{x}.zip to {yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/
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>

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

		$imgmap			= $this->params->def( 'imgmap', 0 );
		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]';
		}

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

Comment by sandeept07, Sep 25, 2008

Hello,

Thanks for the tip. But, where would I get files for " {yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/"

I don't see any "imgmap" folder in "{yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/" I have the latest version of this editor.

Thanks, Sandeep

Comment by adam.maschek, Oct 31, 2008

@sandeep

You get it from inside the zipfile, you will find something like plugin_tiny.zip. For further instructions, please see http://code.google.com/p/imgmap/wiki/TinyMCE_setup

Comment by sandeept07, Nov 02, 2008

Hi Adam,

Thanx a lot for ur response. But, I am sorry to say, I could not find download link for plugin_tiny.zip The download section shows link for imgmap.xxxx.zip

Can you please give me the link ?

Thanks, Sandeep

Comment by adam.maschek, Nov 15, 2008

@sandeep

The plugin_tiny.zip is INSIDE the imgmap.xxx.zip

Comment by toni.olivier, May 28, 2009

This is a great plugin, thanks a lot. I'm wondering whether anyone has considered making it work for JCE editor (based on TinyMCE) which has a great advanced image editor, but no image map capability.

Comment by adam.maschek, May 31, 2009

@toni

I havent heard of JCE yet, however if it is based on tiny, it shouldnt be difficult. If you wanna give it a shot, and publish your findings, let me know.

Comment by joo...@eisenkolb-idt.de, Jul 02, 2009

@ALL Hi I am interested in imgmap for JCE, too - it's a great plugin! I just have to admit, that I am actually clueless how to "port" it. I'll list what I'v tried so far:

EDIT: Don't ask me what was wrong before, but after redoing the steps below, the plugin suddenly shows in JCE and (what's even better) it works!

copied content of imgmap_plugin_tinymce3.96.zip to %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap
created directory %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap/img
copied %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap/images/tinymce_button.gif to %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap/img/imgmap.gif
Went to JCE plugin manager in the Joomla backend, entered the new plugin => Result: Plugin is in the list, icon showing
Went to JCE group manager -> default group -> Layout (tab) and dragged the available icon to the current editor layout
created new article - and the plugin works as expected

@adam If you're interested in providing a jce-plugin you might want to check out the following two ressources:

There are actually just two things to be altered:

change the image subdirectory to img and alter the buttons name
adapt the Iframe-Installer-script to automate the installation

Regards, raumoel

Comment by joo...@eisenkolb-idt.de, Jul 03, 2009

Hi again, as I had several instances of J!1.5 to be updated I took some time and managed to port Adam's work into a JCE Plugin. Just install it via the JCE-Plugin-Installer it should be in your default layout automatically, up and running. get it from here

Regards, raumoel

Comment by adam.maschek, Jul 22, 2009

wow, havent seen these comments for a while, great work Raumoel, i will contact you shortly.

Adam

Comment by i...@webcoreinteractive.com, Aug 10, 2009

Man this doesnt' work. You can't use image map in TinyMCE. That's a fairy tale. Image map is depricated. You will have to hack Joomla to make it work, or whatever you are using it in.