This plugin is designed to easily create Image Maps (aka "hotspots" or "active areas") on any image that you have inserted in CKEditor. It's using the ImgMap library from Adam Maschek , but I've modified the UI that we used in the first version for FCKeditor to remove advanced features that can confuse a normal user.
After selecting an image you can draw over it the active areas that you want to link in that image, and you can use rectangles, circles or free form drawing. It generates the standard HTML codes like <map>, and <area>, there's no special requirement to use this kind of effects.
Those hotspots are highlighted in the image while the document is being edited, so you can easily recognize that this is an special image.


You can check how it works at this demo, it's full featured and allows you to easily check it.

Price and availability

There are three licenses, according to your usage:
  • Single site for 10 euros allows to use the plugin in one domain.
  • OEM allows the usage of the plugin in any website that your company creates and it costs 50 euros.
  • If your company sells a product and you want to integrate this plugin with your version of CKEditor, then you must use the Enterprise License that costs 120 euros
In all the cases the license is a single payment with no extra fees. All future updates are included and there are no limitations on the number of developers or users.
Remember that this payment is only for my work on the CKEditor plugin, check the license of the  imgmap library
Single site license OEM License Enterprise license
Price:  10 euros Price: 50 euros Price: 120 euros
For use in a single domain For companies that want to use the plugin in several domains created by them. This license allows to integrate the plugin in your product that you sell

Other plugins

You can find here a list of other plugins that I've created for CKEditor. Most of them a free and can help you to customize better CKEditor or get rid of little annoyances.


Сава Груп said...

Is it possible to add the option to select the link of my pages with Select? And klolko more expensive it will cost?

Alfonso Martínez de Lizarrondo said...

You can use the CKEditor API to modify the dialog on your own.

I've explained previously how to insert a "browse pages" button to link to your own pages, and in the same way you could create similar code if you prefer to have a dropdown instead of launching a dialog.
There are other examples about how to do this for the normal link dialog and you just can adapt it to work with this dialog.

Nohito Nonaka said...

I Will buy Enterprise license.
Enterprise license is unlimited domains and sub-domains on unlimited servers?

Alfonso Martínez de Lizarrondo said...

Hi Nohito

I don't place restrictions on the domains and servers as that would be a huge burden for me.

Just remember that you can't redistribute the plugin alone, it must be part of your product.

DotNet InAction said...


After integration I noticed that horizontal scroll bar in Image Maps window went missing and image is shrinked into preview window. This causes a lot of troubles, because users end up with setting coordinates in incorrect places. Did you know anything about that?

Thank you

Alfonso Martínez de Lizarrondo said...


The image shouldn't be shrinked at all.
Do you have the same problem in all the browsers?
Can you reproduce the problem in my demo page?
It might be due to a conflict with the css of your site, in that case I will need your help to find the problem and add a rule that fixes it.

DotNet InAction said...

I found it. It was in my bootstrap.css file line 86:

img {
/* Responsive images (ensure images don't scale beyond their parents) */

max-width: 100%;
/* Part 1: Set a maxium relative to the parent */

width: auto\9;
/* IE7-8 need help adjusting responsive images */

height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */

vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;

I am using quite old bootstapper (2.1.1). I checked the latest version and this line is removed from it. Anyway, I will remove this bit and problem solved. Thank you for quick response, I hope this will be useful for somebody else

DotNet InAction said...

What versions of IE this plugin is compatible with?

I'm mostly interested in IE8,9 and 10

Thank you.

Alfonso Martínez de Lizarrondo said...

It should be compatible with IE 8 up to IE 11, just check my demo.

If it doesn't work correctly in your integration, look at the F12 tools to see if your page is running in Quirks mode. Or if there's some other library that it's the one causing problems like you found with that bootstrap.

Patrick said...

Do we need the ImageMap Library to use your plug-in?

Alfonso Martínez de Lizarrondo said...

Hi Patrick

Yes, you need a license (if it applies to you) of the ImgMap library.

I already include the library itself in the plugin so it's ready to use and with some patches that still have been released since its last version, so it's only a matter of being allowed to use it, not how to install it.

Alexander Stoffers said...


i just bought a single page license for testing purposes, but i couldnt download the libraries. I got an airbrake error.

Can you please help me to get the download done?


Alfonso Martínez de Lizarrondo said...

Hi Alex

I've sent a copy of the plugin in an email. If you don't see it, check the spam folder :-)


DotNet InAction said...


I have an issue with IE 8,9,10. I was able to reproduce it on your demo page. Its quite hard to explain so I recorded s short video for you:

If I draw block without touching scroll bars - its fine. If I use scroll bars to get to corner of image and start drawing blocks - the blocks are being put in wrong locations as you can see in the video.

Everything is fine all other browsers.

Hope you can help!

Alfonso Martínez de Lizarrondo said...

Hi dotnet

I think that I've fixed the problem. I'll do more tests to verify it and then I'll try to find your mail to send you a copy so you can test it properly.

DotNet InAction said...

Thank you very much! It will be dotnetinaction[at]

Alfonso Martínez de Lizarrondo said...

I don't have that mail in my list, and I can't find anyone with "dotnet" or "action".

Could you please send me a mail using the address that you used to pay for the plugin?

Thank you

DotNet InAction said...

The plugin was probably bought using email richard.******* or anything else that ends

Andreas Lindén said...

I just bought this and installed it. But when I run it, the image doesn't load in the dialog window.
I'm hoping you can guide me what I'm doing wrong.

Alfonso Martínez de Lizarrondo said...

Hi Andreas

Do you get any error?
Have you tested with different browsers?
Which version of CKEditor are you using?
Do you have any special setup?
Can you use the browser's developer tools to check if the image is there but it isn't visible due to a conflict with the CSS of your page?

Also, it might be easier if you can send me a mail with a URL so I can test your setup and try to find out what's going on

Andreas Lindén said...

No, no errors.
And, yes I have tested with IE, Firefox and Chrome, and it's the same result in all of them. Your demo works fine.
We are using version 3.6.4 of CKEditor.
I just tried to put only the editor in a page and load a image into the editor, I did this to make sure the css isn't doing anything bad. Then I got a error, something like "You have to select a image". (It's in swedish for me). But only once, not again.

Right now this page is offline, so there's no link to it, but maybe we can get it online, or parts of it at least. I will have to investigate that.

Andreas Lindén said...

Oh, and we are using Asp.NET, to be clear. :-)

Andreas Lindén said...

We found that the error is when we add a image from outside the ckeditor: editor.insertText(CKEDITOR.dom.element.createFromHtml('img src="test.aspx?fileId=' + hs.value + '" alt="' + hsname.value + '" /'));

Do you have some way for us to solve this problem?
I removed the tags above on purpose, since they aren't allowed

Andreas Lindén said...

Sorry for posting again, but we found some more info.

On line 191 in imagemaps.js "img_obj = editor.getSelection().getSelectedElement();"

img_obj are = ({$:{}})

Alfonso Martínez de Lizarrondo said...

Are you really inserting your image as text?

I really don't understand what you're trying to do, but if there isn't a real image into the content of the editor then my plugin can't work as it has been designed to work with images, not raw text.

Andreas Lindén said...

Sorry there was a miss type it should be "insertElement". We add an image from an javascript function. The Image shows up in the ckeditor but do not show when we click on the imagmap icon.

Alfonso Martínez de Lizarrondo said...

Then the problem might be that the image hasn't been processed by CKEditor and it's missing its usual "hidden" src. Besides the src attribute, set a new one "cke-saved-src" with the same value

'img src="test.aspx?fileId=' + hs.value + '" cke-saved-src="test.aspx?fileId=' + hs.value + '" alt="' + hsname.value + '" /'

Andreas Lindén said...

Sorry no go. The "cke-saved-src" did not work :-(

Alfonso Martínez de Lizarrondo said...

If you put a breakpoint at line 228 that's where the source of the image is read:

var src = ?"cke-saved-src") : img_obj.getAttribute("_cke_saved_src")

can you verify if you reach that point and the src has the proper value or not?

I'm gonna add a safety check after that, something like:
if (!src)
src = img_obj.$.src;

but that will be tomorrow when I have a little free time.

Andreas Lindén said...

I checked that line, and we get to that line, and the value of src is null.

Alfonso Martínez de Lizarrondo said...

Have you tried the 2 lines patch that I've mentioned?

I've tested it and it seems to work

Andreas Lindén said...

I think that fixed the problem. Thank you. :-)

Ben Tse said...

hi ,

i am facing an issue with widget.

i cannot update the content in widget if i include the imagemaps plugin in the editor.

For example width Image2 widget,
i cannot select and update the caption text.

Thanks ,


Alfonso Martínez de Lizarrondo said...

The image widget was a real nightmare and it required several hacks in order to get it to work.

I've found where the problem lies with regard to this issue, but as I don't have your mail I'll have to test it thoroughly in order to check if disabling that code is too problematic.

Ben Tse said...

thanks for your reply.

Actually, it is not only occur in image widget. All other widgets created by myself have this issue too.

You may contact me though this email.

Alfonso Martínez de Lizarrondo said...

I don't understand why the problem that I found could affect other widgets. I'll try to test with another one without the patch.

BTW, I can't find that email under my contacts. When you request support it's much better to write me directly using the mail used to purchase the plugin instead of using the comments here.

Athena Anthes said...

Great plugin, except it seems not to work when an image needs to be responsive. As long as I use it in a browser, it's okay. But when I test it for a phone screen, the image doesn't scale and it doesn't even fully load at times. Is there a solution for this?

Alfonso Martínez de Lizarrondo said...

The plugin just adds the standard map elements, I really can't see any reason why it should affect the sizing of the image or if it's displayed or not.

Can you show me a page where there's an image with this problem?

Athena Anthes said...

Most of the times it looks like this, so it still works but doesn't scale as it should.

Other times I get this and the image just doesn't fully load. I didn't have this problem before using this plugin.

Athena Anthes said...

Although in this case it also won't show the entire image on a regular screen size

Alfonso Martínez de Lizarrondo said...

I've created this simple demo with a normal image and the same one with a map created with the plugin:

You can check that it loads and resizes the images correctly, but the map element is an "old" technology and once you resize the image the areas remain in their original location, so you should add a script like this one to your page:

If the image fails to load then you'll have to find out if there's something else in your page that might be causing it.

Athena Anthes said...

Thanks for that extra plugin :) I've found the mistake, I also had jq_maphilight installed (using drupal here) and it put a another div and canvas around the image, which didn't respond to my css. I've uninstalled the module (don't really need it) and now it works :)

Thanks for helping me out!

Juan Carlos Gonzalez Arroyave said...

Hola señor Alfonso
Yo trabajo en una empresa de desarrollo de software a la medida y para algunos de nuestros clientes, nosotros solemos incluir CKEditor en las aplicaciones que ellos nos solicitan. Si queremos incluir este plugin, cuál licencia es conveniente? Y quién debería comprarla? nuestros clientes o nosotros?

Alfonso Martínez de Lizarrondo said...

Hola Juan Carlos

Si ustedes no distribuyen un producto que incluya siempre CKEditor y este plugin, la licencia que más les puede convenir es la OEM, de esta forma no sería necesario pagar por licencias adicionales para cada nuevo cliente.

La cuestión de comprar la licencia el cliente (que usaría la de una sola web) o ser ustedes quien la pague (pueden coger una por cada web o como digo una OEM para todas las webs), aparte del aspecto económico también indica quien será mi cliente. Si ellos quieren tener la seguridad de recibir futuras actualizaciones sin depender de ustedes, entonces ellos deberían ser mi cliente, si por contra el soporte siempre se lo van a proporcionar ustedes entonces es claro que son ustedes quienes deben realizar el pago y luego cobrar a los clientes por su trabajo.

Jerry Ho said...

We design website for our customer and
they use ckeditor to maintain their website.

They need to use this plugins and we don't know what kind of license do we buy?

We use Ckeditor 3 and Ckeditor 4, how many license do we buy?

Please tell us about information, thank you.

Alfonso Martínez de Lizarrondo said...

Hi Jerry

Sorry for not replying earlier, but I skipped the notification :-(

If you want to do this for a single client, then you can use just the Single site license.

Your comment about using both editors is strange, that's not what I would expect for a single client, so maybe you have several clients and you add CKEditor to their site on a case-by-case basis. If that's correct you can opt to pay for a license for each client, or buy a single time the OEM license and you can keep adding the plugin to your clients with no additional costs.

Finally, if you're building a product that you distribute then the Enterprise license is the right one for you.

Jerry Ho said...

Thank you for replying us.

In fact, we have several website for different customer that you mean case-by-case (It was just like we have 100+ customer with their web). In furture, we still need to create new site for our new customer, so we don't know that we could buy OEM License or Enterprise license?

You said about using both editors is strange, maybe we apologize for not making our points clear, even to mislead you.

Our regular customer use Ckeditor 3 with their old web, but we create new client with Ckeditor4 now. We hope that all of our website can support imageMaps plugin, so both editors is use by one license or different license

Alfonso Martínez de Lizarrondo said...

Ok, with regards to the CKEditor version, it doesn't matter. As long as it's 3.6 it should work and the same license is valid for that version and the new ones.

With so many customers it seems that instead of OEM that it's geared more to sites created hand by hand, the Enterprise license would fit you better.

But you can always pay now the OEM license and in the future if you're really happy with the plugin pay just the difference to the Enterprise license.

Jerry Ho said...


We decide to use the Enterprise License and pay it by card today, buy Paypal tell us that your account has problem and our payment has failed.

We don't know what should we do and will be charged a fee?
Our mail is "plugins at" with this payment.
Could you help us to confirm our payament?
Thank you.

Alfonso Martínez de Lizarrondo said...

Hi Jerry

I'm sorry about that problem. I haven't got any mail and I don't see any message when I log in PayPal.

Have you used that PayPal account before?

You should be able to check the status of the payment in your account and they shouldn't have charge you anything.

You can try to pay by sending the payment from your PayPal account to my email: or write me with a screenshot of the error message.

Jerry Ho said...

Ok, we will try to pay again with our paypal account next week.
Thank you for your help :)

Fabio Penagoli said...


I installed the plugin following the docs but I don't see the toolbar button.
I use CKeditor 4.4.2 on Sendy ( software on PHP.

1. I copied the plugin folder under ckeditor/plugins directory
2. Added the row config.extraPlugins='imagemaps'; on the config.js file
3. Added the word "ImageMaps" inside the config.toolbar in the config.js file

What I'm doing wrong?


Alfonso Martínez de Lizarrondo said...

Hi Fabio
I've replied to the email that you have sent me directly.
If you answer it we might be able to find out what's the problem with your setup.

Ben said...

We are having a problem with the plugin not working on newer browsers. I was able to reproduce this on your demo page by drawing a new square image map zone, then selecting the pointer tool. When I hover over the zone, the resize cursor remains and I am never given the pointer cursor to allow me to move the box. I was able to reproduce with both IE 11 and Chrome version 40.0.2214.111 m. We are having some users complain about this on our site, so do you know of a fix for this?

Alfonso Martínez de Lizarrondo said...

I think that I disabled some of the older effects on hovering as they were "too noisy" and opted for something softer.

If you click you can drag the map, correct?

So it's only that you're missing a drag cursor even before starting to drag, right?

Ben said...

No, I am unable to drag to move the box either. When I drag, it resizes the box instead, even though I have selected the pointer tool.

Alfonso Martínez de Lizarrondo said...

I can reproduce that problem with IE11, testing with Firefox and Chrome works fine.

Uri Pintel said...

Hi Alfonso
Is there a RTL support for this plugin.
Or maybe a workaroud?


Alfonso Martínez de Lizarrondo said...

Hi Uri,
Can you clarify what do you mean?

I didn't add anything specific with regards to RTL, but the fact is that I don't know if there's any problem at all because I don't use such languages.

Alfonso Martínez de Lizarrondo said...

Hi Ben

Finally I've found the time to work on your issue, fix it as well as other minor details and test that now everything looks OK.

I've sent the new download link to the registered emails, so please check there (including the spam folder) for the mail with the new version.

meomeo miumiu said...

I cannot find the link to download image maps. Please help me about the installation. Or I must buy the license to download.

Alfonso Martínez de Lizarrondo said...

Yes, when you pay the license you will get the download. Remember that this license doesn't cover the imgmap code as it has a different license.

meomeo miumiu said...

I have bought the license and installed image maps for CKeditor in my website. But I have a problem:The areas didn't correct after save. I think that maybe it relevant to the responsive design. Please help me in this situation.


Alfonso Martínez de Lizarrondo said...

The native HTML maps aren't responsive, you need to add some javascript that takes care of updating the data as the image is resized.

I'll try to add a sample when I have some free time

최혜선 said...


ImageMaps (OEM License)

I'd like to buy this item
I'm curious if the license is permanent if bought once, or I need to pay for it every year.

Please check them and give me a quick reply.

Thank you.

Alfonso Martínez de Lizarrondo said...

It's explained at the description:

"In all the cases the license is a single payment with no extra fees. All future updates are included and there are no limitations on the number of developers or users."

B. Bakker said...

Hi Alfonso, Does this plugin work correct with ckeditor in Drupal 7?
I'd like to use it for one of our clients, but I need to test it first is that possible?

Alfonso Martínez de Lizarrondo said...

Yes, it's possible to use it in Drupal as long as you know how to configure it correctly.

I mean: Drupal can be tricky to configure to allow things, so you first have to be able to manually check that if you add a mapped image (with normal HTML code, no fancy Drupal modules) and save the code, then it works correctly and Drupal doesn't change or remove it. If it's removed then chances are that when you add this plugin the HTML code will also be removed by Drupal, so you must check this first.

Once that's done, you also must be able to manually add a CKEditor plugin. Go to the plugins repository, grab one that you one to test and try to add it to your setup. If it works then everything is OK and you're ready to go.

testnbsts said...

Is this plugin written in javascript or in php? My server isn't able to execute php code.


Alfonso Martínez de Lizarrondo said...

It is javascript, no server code at all.
Of course, you must have CKEditor working before trying to use this plugin

Terry Delahunt said...


This plugin looks exactly what I need to solve an issue I am having.
The issue is that we have in our app what are called 'Point and Click' questions for our users.
This is a question where the user clicks on the part of an image they think is the correct answer.
We use ckeditor hotspots to achieve this.
The question is created by opening a ckeditor canvas and dropping an image on that. Next step is to add the hotspot to the image.
We add the hotspot by dragging the shape over a representation of the canvas & image, or inputting the cords manually.
However the problem is that if the image was centre aligned on the canvas, the hotspot does not match-up with the image properly, as the coords appear to be relative to the canvas and not the image itself.
I think this plug in would get round that as the user is directly setting up the hotpsot on the image itself, there and then.
What do you think?

Alfonso Martínez de Lizarrondo said...

It's hard to answer what might be wrong with your setup.
If you've already created a system to draw using canvas and place hotspots there, it seems that you have all the pieces in place but the alignment of the image shouldn't affect that.
My best suggestion is to test the demo of this plugin and verify if it does or not what you want and then compare with your code.

Terry Delahunt said...

Thanks Alfonso,

Couple of questions on the demo.
Firstly, I do not seem to be able to paste my image into the demo editor.
Secondly, the demo editor does not have the centre align align option. Can I centre align via the source code button perhaps?

I presume when you say to draw using the canvas, the end result should be one single image made up of the canvas and whatever I place on it?
Our issue is that we are adding the hotspot relative to the canvas and not the canvas + the image so the hotspot cords only work with left alignment.
Does that make sense?
Here is a link to my question on stackoverflow, it might clarify what Im trying to accomplish a little better.


Terry Delahunt said...

Sorry, I forgot to add the link to the stackoverflow question....


Alfonso Martínez de Lizarrondo said...

The demo is about editing maps, that's why I didn't add an image upload option, but using Firefox you can paste it.
Also in order to avoid confusion I removed alignment and any other option that wasn't really needed, but you can set something as simple as <p align="center"> and the image will be centered, but of course that the mapping will always be relative to the image because that's how html maps work. I don't know how you're generating the canvas because that seems far more complex that just a simple map.

Please, use the demo and look at the code that it generated. I can't paste it here due to the anti-spam checks, but it's plain old map code.

Mai Đào said...

I have migrated imagemaps from an old website used old imagemaps version. And the render html like this:

map id="imgmap201564172348" name="imgmap201564172348">img alt="" width="805" height="141" usemap="#imgmap2016219105451" src="/files/fckeditor/id banner(1).png">map id="imgmap2016219105451" name="imgmap2016219105451">
area shape="rectangle" target="_blank" coords="63,24,146,104" href="">
area shape="rectangle" target="_blank" coords="203,20,292,100" href="">
area shape="rectangle" target="_blank" coords="356,20,448,104" href="">
area shape="rectangle" target="_blank" coords="495,22,587,106" href="">
area shape="rectangle" coords="655,23,737,99" href="">/map>/map>

(I cannot post html so I remove the "<" in the html code. Sorry about that)

The new website, I use Imagemaps for Ckeditor 3. The view is OK but when I edit and save the content, the image maps will be lost. I have tried the demo "" it has the same error when click on the source button.

Please help me on this issue.

Thanks & Regards,

Alfonso Martínez de Lizarrondo said...

Hi Mai

that HTML code is incorrect because it's nesting a map and an img inside another map, that's wrong.
the problem (I haven't really tested) is that when my plugin saves the content tries to clean up any left over if the image corresponding to a map has been removed, so it finds that the external map doesn't have a corresponding image and removes it along its content (that should be only its areas), and then everything is gone.

You'll have to clean up the existing content to avoid that incorrect nesting.


Nigel Osborne said...

I provide an open source software product free to anyone who cares to download it. Users have asked that I include your plugin, which does seem like a very good idea. But what license? For free software your enterprise license is far too expensive, even if well justified which I am sure it is. But I have no control of what domains or how many might use it by downloading my software.

Do you have a special price for open source projects?

Alfonso Martínez de Lizarrondo said...

How nice of them.
"Hey, we like that plugin but we don't want to pay a dime to its developer; so please, get it for us so we can use it for free"

Enterprise license states that it's aimed for a product that you sell, so if you're giving it for free to anyone then you can't use it. Otherwise anyone could go to your repository just to grab my plugin.

I can give if for free to NGOs if I like their goals and their reputation (lately I have been severely disappointed by some that call themselves "non-profit", maybe it's only a problem in Spain, but I can assure you that Spain is really corrupted so it's hard for me to keep trusting anyone just by their nice words)

Nigel Osborne said...

Thanks for replying. I'll look elsewhere for something that fits better with the open source ethic.

Barbara ONeal said...

I have a question. I am working on a site that would like to use an image map to open up a modal window in like a shadowbox.

So I would have an image with hot spots. when someone clicks on one of the hotspots a modal window would open up with what ever content I want to have in it. I am using CKEditor with MURA content management system.

Will this plugin work for this type of application. I don't want to purchase the plugin unless it is possible to have this kind of functionality. Thank you.

Alfonso Martínez de Lizarrondo said...

The plugin only allows to create the hotspots on the image and link them to a URL. You'll have to add the javascript to catch the click on those links and use the shadowbox that you prefer.

Load the demo and test its features, it only generates the HTML that you can see, then adding extra javascript on your page you can modify how the links will open.

Barbara ONeal said...

Just wanted to let you know it works perfectly. I purchased for a single site to test it out and it does exactly what I want. Thank you!