ImageMaps

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.

Demo

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.

115 comments:

Сава Груп 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 said...

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

Unknown said...

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

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

Unknown said...

Hi,

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

Hi

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.

Unknown 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

Unknown said...

What versions of IE this plugin is compatible with?

I'm mostly interested in IE8,9 and 10

Thank you.

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

Unknown said...

Hello,

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?

Thanks
Alex

Alfonso said...

Hi Alex

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

thanks.

Unknown said...

Hi,

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:

https://www.youtube.com/watch?v=7N0NOwtOKmw

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

Unknown said...

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

Alfonso 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

Unknown said...

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

Unknown said...

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

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

Unknown said...

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

Unknown 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

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

Unknown 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 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 + '" /'

Unknown said...

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

Alfonso said...

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

var src = img_obj.data ? img_obj.data("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.

Unknown said...

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

Alfonso said...

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

I've tested it and it seems to work

Unknown said...

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

Unknown 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 ,

Ben

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

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

yoman2036@gmail.com

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

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

Unknown said...

Most of the times it looks like this, so it still works but doesn't scale as it should.
https://drive.google.com/file/d/0B9pMFbUydeJwc2x5cmdjRFRUNWc/edit?usp=sharing

Other times I get this and the image just doesn't fully load. I didn't have this problem before using this plugin.
https://drive.google.com/file/d/0B9pMFbUydeJwd3V1RHYzbWRvV2s/edit?usp=sharing

Unknown said...

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

https://drive.google.com/file/d/0B9pMFbUydeJwRkY3VVR6ZFV6bkk/edit?usp=sharing

Alfonso said...

I've created this simple demo with a normal image and the same one with a map created with the plugin: http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/responsive.html

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:
https://github.com/stowball/jQuery-rwdImageMaps

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.

Unknown 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!

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

Darran Ho said...

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

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

Darran Ho said...

Hello

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 grnet.com.tw" with this payment.
Could you help us to confirm our payament?
Thank you.

Alfonso 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: amla70@gmail.com or write me with a screenshot of the error message.

Darran Ho said...

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

Unknown said...

Hi,

I installed the plugin following the docs but I don't see the toolbar button.
I use CKeditor 4.4.2 on Sendy (www.sendy.co) 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?

Thanks!

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

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

Anonymous said...

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

Tnx
Uri,
Activetrail.com

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

Unknown said...

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

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

Unknown said...

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

Regards,

Alfonso 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

Unknown said...

Hello,

ImageMaps (OEM License)

http://alfonsoml.blogspot.kr/p/imagemaps.html

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

Thanks

Alfonso said...

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

Unknown said...

Hi,

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

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

cheers.

Unknown said...

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

link

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

Unknown 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="http://km20.capgemini.com/community/12431">
area shape="rectangle" target="_blank" coords="203,20,292,100" href="http://km20.capgemini.com/newsletters/12431">
area shape="rectangle" target="_blank" coords="356,20,448,104" href="http://talent.capgemini.com/global/pages/hubs/strategic_offers/insights__data/">
area shape="rectangle" target="_blank" coords="495,22,587,106" href="https://www.yammer.com/capgemini.com/#/threads/inGroup?type=in_group&feedId=73827">
area shape="rectangle" coords="655,23,737,99" href="mailto:idkm.in@capgemini.com">/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 "http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo/" it has the same error when click on the source button.

Please help me on this issue.

Thanks & Regards,

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

regards

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

Unknown said...

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

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

Unknown 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!

Admin said...

I have an issue with the imgmap generated -- i'm using this for emails. the map area is not clickable on newer mobile phones --- has anyone experience this error.

Alfonso said...

Many email clients restrict the kind of HTML that can be used (or even if HTML is allowed at all), so it isn't strange that some of them might remove mapped areas.

Unknown said...

Where can I download the plugin for CK Editor?

Alfonso said...

Select the kind of license that you need and click its Buy now button at the end of the description

Unknown said...

Done with download,

Is there any "How to" install the plugin in CKEditor on Drupal 8?

Alfonso said...

I don't have any specific info about this plugin and Drupal 8. You can read some generic guidelines (for Drupal 7 I think) in https://alfonsoml.blogspot.com.es/2012/12/installing-ckeditor-plugin-inside.html
I guess that you can find other guidelines for Drupal 8, but the most important part is that HTML maps uses HTML elements (map and area) that might not be whitelisted so you should adjust the Drupal filters.

Unknown said...

I bought a license to use this plugin on concrete5 cms.
I've installed same as another ckeditor plugin, but the toolbar disappeared after the imagemaps plugin enabled.
Does this plugin compatible with CKEditor 4.9.1? (concrete5 CMS uses CKEditor 4.9.1 now)
Thanks for your great package.

Alfonso said...

I don't have reports of issues with the CKEditor 4.x versions. Maybe you made a little syntax mistake when you added the plugin and the configuration?
Do you have any errors in the console?
If you can send me a mail with a url to test I can try to check if I find something wrong.

Brian Bakewell said...

Hi, do you know if this works with DDN 9.2.2?

Alfonso said...

Hi Brian

I don't use DNN, I wrote this guide for DNN 8.0.4 long ago, I hope that similar steps might also work https://alfonsoml.blogspot.com/2018/02/adding-ckeditor-plugin-to-dotnetnuke-804.html

Brian Bakewell said...

Is there a way we could download this on to our test server to see if this will work please?

Is there an email address or something that I could contact you direct on?

Alfonso said...

I'm sorry, this is plain javascript provided without any obfuscation or protection, if I provide you a test version then there's nothing preventing you from using it and telling me that it fails.
You can write me to amla70@gmail.com

Unknown said...

Hi, we would like to use your plugin. But right now the web is in development server and url. When we go live we have different url and also want to keep the development for testing. Can I buy single license for that?

Alfonso said...

Yes, there's no problem about using the plugin in a development server as well as the production one.

algorges said...

Hello, I'm interested in your plugin. my question is that ckeditor 4.9.2 (revision 95e5d83) is built into an email editing tool, i already found the ckeditor folder and the plugins folder inside the tool.

To install your image map plugin, in theory I need to unzip the plugins folder and it should work?

Alfonso said...

Yes, first that and then adjust the configuration of the editor to include the extra plugin in the initialization.

But be aware that mail clients might have problems with image maps, I guess that you already know that the HTML and CSS capabilities of mail is quite poor and this is one of these situations. Please test your system with some image maps that you have created manually and verify that the mail clients that you support handle them properly, because that's a problem with the mail clients, not my plugin.

algorges said...

Thanks for the quick response.
I will test manually and thus opt for another solution that allows you to create multiple links on top of an image.

Unknown said...

I noticed the src of the image is a blob from your server which is how you're rendering the map areas inside the editor. My company cant have client data being sent out like that, is there an alternative for us to bring the server side component into our data center? Or at least a way to configure the plugin to not automatically use your server?

Alfonso said...

The blob is generated by the browser, although you can see the domain in the url of the blob the image isn't send anywhere: you can unplug your computer and the demo will still work as isn't using any data after it has loaded the assets.

I provide the full code and you can host it in any site that you want to, I don't want to see any of your pictures ;-)

Unknown said...

Ah most excellent! Thanks for the quick reply!

Unknown said...

Do you have a complete solution for drupal 8?

Alfonso said...

This is all I know about Drupal: https://alfonsoml.blogspot.com/search/label/Drupal

Nguyễn Vũ Trường said...

When i was updated Chrome to 86.0.4240.75 (64 bit).
I clicked button ImageMap in Ckeditor and resize iframe. Button in iframe was hidden.
Can you help me?

Alfonso said...

Hello Nguyen
I've tested right now with that version of Chrome in https://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/ and I don't notice any issue.

Can you mail me some screenshot of the problem?

Nguyễn Vũ Trường said...

@Alfonso thank you for your reply.
I was uploaded my video error to Google Drive. I think Problem is image with height .
You can check it.

link video:
https://drive.google.com/file/d/1fGs3KBM7XRK29A5kin04dMQHdhKe_odt/view?usp=sharing

Alfonso said...

Thank you

I can reproduce the issue with current Chrome as well as Canary, I'll try to find out what's the problem.

Per Henrik Lausten said...

Hi Alfonso, if I add an image map to an image and then laer want to replace that image with a newer image, then the image map is deleted when I delete the existing image.

Do you know of a way to keep the image map but replace the image?

Thanks in advance!

Alfonso said...

In order to preserve the map you have to replace the src of the image instead of deleting it. It depends of course of how you have configured CKEditor in order to do that.
For example, one of the features that I cared to add to my SimpleUploads plugin was that if you drop an image over an existing one it replaced it "in-place" IIRC, so in that situation the image map should be preserved.
In the same way, if you use the Image dialog provided by CKEditor it should replace the src and preserve the map.

roothresh said...
This comment has been removed by the author.
Rogério Carrasqueira said...

Hi Alfonso!

Do you still are giving support for this plugin? Thanks

Alfonso said...

Hi Rogério
Yes, I try to support all of my plugins as best as I can.

Regards.

Unknown said...
This comment has been removed by a blog administrator.