Pages

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

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.

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?

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.

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

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.

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.

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.

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

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.

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

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?

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.

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

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.

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

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 directory2. Added the row config.extraPlugins='imagemaps'; on the config.js file3. Added the word "ImageMaps" inside the config.toolbar in the config.js file

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?

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.

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.

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?

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.

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.

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.

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

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.

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.

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)

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.