My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Joomla_setup  
How to set up image map editor for joomla
Featured, Phase-Deploy
Updated Jul 25, 2009 by adam.mas...@gmail.com

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)

  1. copy files from plugin_tinymce3{x}.zip to {yourjoomlainstance}/plugins/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/
  2. 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.
  3. Launch up your article editor, and you are ready to use the plugin.

Older Joomla (Version 1.5.4 for example)

  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:
  3.  		<param name="imgmap" type="radio" default="1" label="Imagemap" description="Imagemap">
     			<option value="0">Hide</option>
     			<option value="1">Show</option>
     		</param>
  4. edit {yourjoomlainstance}/plugins/editors/tinymce.php, after 'XHTMLxtras' add lines:
  5. 		$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]';
    		}
  6. go to Joomla admin/Plugin manager/Editor - TinyMCE 2.0/Advanced Parameters, and make sure Imagemap is set to Show.
  7. go to article editor, click on any image, and notice the button highlighted on the toolbar, you are done:)
Comment by sandeep...@gmail.com, 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 project member adam.mas...@gmail.com, 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 sandeep...@gmail.com, Nov 2, 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 project member adam.mas...@gmail.com, Nov 15, 2008

@sandeep

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

Comment by toni.oli...@gmail.com, 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 project member adam.mas...@gmail.com, 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 2, 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!

  1. copied content of imgmap_plugin_tinymce3.96.zip to %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap
  2. created directory %JOOMLA_ROOT%/plugins/editors/jce/tiny_mce/plugins/imgmap/img
  3. 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
  4. Went to JCE plugin manager in the Joomla backend, entered the new plugin => Result: Plugin is in the list, icon showing
  5. Went to JCE group manager -> default group -> Layout (tab) and dragged the available icon to the current editor layout
  6. 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 3, 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 project member adam.mas...@gmail.com, Jul 22, 2009

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

Adam

Comment by webcorei...@gmail.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.

Comment by lukebar...@gmail.com, Feb 1, 2010

the tinymce one for version 1.5.15 joomla shows the icon and lets me add attributes. But the USEMAP attribute is still stripped! so annoying there is not a simple override for this! argh

luke

glasgow

vexedville...

Comment by lukebar...@gmail.com, Feb 1, 2010

i guess it is to do with it being XHTML and so it gets copped, removed etc. JQuery / js is a workaround, but doesnt allow nonJs people obviously to have a working imagemap.

Comment by sandeep...@gmail.com, Feb 15, 2010

I agree. Adam has built a great tool. But, no way to add "usemap" attribute to image. How do we link them?

Comment by mysterys...@gmail.com, Mar 22, 2011

Works in Joomla 1.6.1

  • copy files from plugin_tinymce3{x}.zip to {yourjoomlainstance}/media/editors/tinymce/jscripts/tiny_mce/plugins/
  • edit {yourjoomlainstance}/plugins/editors/tinymce/tinymce.xml, after 'directionality' add lines:
<field name="imgmap" type="radio" 
       default="1" 
       label="Imagemap" 
       description="Imagemap"
>
       <option value="0">JHIDE</option>
       <option value="1">JSHOW</option>
</field>
  • edit {yourjoomlainstance}/plugins/editors/tinymce/tinymce.php, after 'XHTMLxtras' add lines:
//imgmap
$imgmap = $this->params->def( 'imgmap', 0 );
                if ( $imgmap ) {
                        $plugins[]      = 'imgmap';
                        $buttons3_add[] = '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/Advanced Parameters, and enter imgmap in both Custom plugin and Custom button input fields. Make sure functionality parameter is set to extended.
  • go to Joomla admin/Plugin manager/Editor - TinyMCE 2.0/Advanced Parameters, and make sure Imagemap is set to Show.
  • Launch up your article editor, and you are ready to use the plugin.

I hope this will help... ;) Thanks Adam for your tool.

Comment by alex79...@gmail.com, Apr 1, 2011

1. where you take this - TinyMCE 2.0 ? 2. if make all your steps in default configuration joomla1.6.1 plugin_tinymce3.4.1 than problems in cms in article editor buttons (save, close etc) not work and panel with icons TinyMCE missed if copy files from plugin_tinymce3{x}.zip to {yourjoomlainstance}/editors/tinymce/ and if remove //imgmap <skip>

after tnat TinyMCE begin work

Comment by alex79...@gmail.com, Apr 1, 2011

its found in apachelog: File does not exist: /home/virtwww/w_1-in1_1ekdjh90/http/mysite/media/editors/tinymce/jscripts/tiny_mce/plugins/imgmap/editor_plugin.js, referer: http://www.link_to_page_wich_i_try_edit

this file editor_plugin.js not exist

Comment by mysterys...@gmail.com, Apr 6, 2011

@alex79 sorry it was late in I wrote that comment... :D so here is the right one... On my Joomla 1.6.1 it's work perfect...

Works in Joomla 1.6.1

  • copy files from plugin_tinymce3{x}.zip to {yourjoomlainstance}/media/editors/tinymce/jscripts/tiny_mce/plugins/
  • edit {yourjoomlainstance}/plugins/editors/tinymce/tinymce.xml, after 'directionality' add lines:
<field name="imgmap" type="radio" 
       default="1" 
       label="Imagemap" 
       description="Imagemap"
>
       <option value="0">JHIDE</option>
       <option value="1">JSHOW</option>
</field>
  • edit {yourjoomlainstance}/plugins/editors/tinymce/tinymce.php, after 'XHTMLxtras' add lines:
//imgmap
$imgmap = $this->params->def( 'imgmap', 0 );
                if ( $imgmap ) {
                        $plugins[]      = 'imgmap';
                        $buttons3_add[] = '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/Basic Options and on Extended Valid Elements copy this 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/Advanced Parameters, and enter imgmap in both Custom plugin and Custom button input fields. Make sure functionality parameter is set to extended and Imagemap is set to Show.
  • Launch up your article editor, and you are ready to use the plugin.
Comment by mysterys...@gmail.com, Apr 6, 2011

when I wrote...

and my plugin_tinymce3{x}.zip has that editor_plugin.js try to download the plugin again and make a new instalation...

Comment by alex79...@gmail.com, Apr 7, 2011

After that manual all work fine tnx:)

Comment by alex79...@gmail.com, Apr 7, 2011

upd. small problem:) In article manager simple code:

<img src="images/test.jpg" border="0" width="754" height="600" /> 
<map id="imgmap201147173720" name="imgmap201147173720">
<area shape="rect" alt="test" coords="427,340,458,351" href="www.google.com" /> 

but i dont see that tag "usemap" if I manual writing <img src="..." him missed after saving article whats wrong?)

Comment by em...@folkert.com, Jun 20, 2011

@mysterys...@gmail.com I use joomla 1.6.3 and followed all steps. In the editor i can use the imagemap to set the coordinates, but when i go to my website i dont see any of the mouseovers work. What can it be?

Comment by loic....@gmail.com, Jun 21, 2011

You can fix this by editing /plugins/editors/tinymce/tinymce.php; add |usemap in img[class etc. (you may add = after alt if you want to be able to add empty alt attributes in the img tags). If you want to be able to add title attributes in the textarea tags you may add |title in area[shape etc.

Comment by em...@folkert.com, Jun 22, 2011

@loic...thanks that worked, but why wasnt this part of the manual above?

Comment by paulsugg...@me.com, Jun 29, 2011

I'm having the same problem as folkert

I have looked at the tinymce.php and the usemap code appears to be there - see below - how can I get it to work??

'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]';

}

Comment by paulsugg...@me.com, Jun 29, 2011

Also I have noticed that when i create a area - update - then save - when I go back into the article/select image/click image map button - the image map areas appear to have cleared them selves.

Am I missing something here?

Comment by crazz...@gmail.com, Jul 22, 2011

I'm using Joomla 1.5 did all the steps as described above. can use the image map in my editor. but on my website there is no mouseover like Folkert. add |usemap in img in the tinymce.php but is no difference. What can I do to make it work?

Comment by rocskart...@gmail.com, Aug 19, 2011

Hello! Joomla version is 1.6.3 and everything is done as described mysterys but I do not see the button. More often that not checked whether I made a mistake somewhere but I did everything right and overheated, but no nothing.

Comment by veldjma...@gmail.com, Oct 13, 2011

Can You add my solution how to add IMGMAP to use with Tinymce in JOOMLA 1.7?

1. Copy folder "imgmap" to "JOOMLA_FOLDER/media/editors/tinymce/jscripts/tiny_mce/plugins/" 2. Open tinymce.php from "JOOMLA_FOLDER/plugins/editors/tinymce/" 3. Find line:

// advimage $advimage = $this->params->def('advimage', 1);
if ($advimage) {
$plugins = 'advimage'; $elements = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
}

4. After that add:

// imgmap $imgmap = $this->params->def('imgmap', 1);
if ($imgmap) {
$plugins = '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]'; $buttons4 = 'imgmap';

}

5. Save file. Now Imgmap will work with tunymce in JOOMLA 1.7

Comment by leon.gro...@gmail.com, Nov 2, 2011

I have implemented all the items above in my Joomla 1.7 site. If I look in JCE configuration I see a blank image for the image map. When I go to an article I don't even see the blank image for imgmap. What can i do? Who can help me?

Comment by kmouk...@gmail.com, Dec 5, 2011

Hi all, I tred to install imgmap tool by following EXACTLY what Mysterys described above but as soon as I modify tinymce.php, the article menu in the admin is corrupted (WYSIWYG not visible and no possibility to save an article...). I'm using 1.6.3 version.

Did I miss something ? Thank you very much for trying to help me out.

Comment by Ignite...@gmail.com, Dec 14, 2011

i might sound stupid asking this but....where on earth do i download the plugin??

Comment by Ignite...@gmail.com, Dec 14, 2011

NEVERMIND....sorry, running on zero sleep can lead to stupid questions.

Comment by mysterys...@gmail.com, Jan 8, 2012

@Ignite on top of this page you find the download button... you can find the plugin there...

or

http://code.google.com/p/imgmap/downloads/list

Comment by heartfre...@gmail.com, Apr 10, 2012

Can we Highlight the imagemap while Mouseover? Plz do tell me abt this?


Sign in to add a comment
Powered by Google Project Hosting