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

@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

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

@sandeep

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

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.

@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.

@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:

• JCE-Plugin Iframe
• backported version of the Iframe-Plugin for TinyMCE

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

Regards, raumoel

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

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

Adam

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.

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...

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.

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

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.

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

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

@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.

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...

After that manual all work fine tnx:)

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?)

@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?

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.

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

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

}

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?

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?

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.

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

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?

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.

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

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

@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

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