ImageMap Plugin - how to use
Asked by Test test:

In which form I write the coordinates? There is no inputfield-preview or introduction..

And where is the reference to the image?


Answers:
author: Christina Schantin [Communardo]
body: Expected behavior: the mouse pointer turns and you will see the titel and after clicking the link opens in a new browser tab.

Is this the complete code? If so, try this:

1. Attach your image
2. Insert imagemap macro
3. Configure imagemap macro with image name
4. Insert map macro into imagemap macro body
5. Configure map macro with coordinates and links

The source code should look like this:

\<ac:macro ac:name="imagemap"\>  
\<ac:parameter ac:name="name"\>MP900403440.JPG\</ac:parameter\>  
\<ac:macro ac:name="map"\>\<ac:parameter ac:name="title"\>title teest\</ac:parameter\>\<ac:parameter ac:name="coords"\>114,100,1243,720\</ac:parameter\>\<ac:parameter ac:name="link"\>http://www.google.de\</ac:parameter\>\</ac:macro\>\&nbsp;\</p\>\</ac:rich-text-body\>\</ac:macro\>

comments: author: Test test
body: Nice one. I did not realize the context between this both macros. It work!


author: dzuluaga
body: Is this available for OnDemand customers? I tried to find HTML and HTML Include macros and none of them are available to OnDemand. I just want to include the code for the map, which is referenced by the image usemap attribute. For instance: usemap=#imgmap2014102791728''\<map id="imgmap2014102791728" name="imgmap2014102791728"\</map\>


author: Nils Bier _K15t_
body: Hi @Diego Zuluaga,

we're currently running a private beta program for ImageMap for Cloud. If you're interested, please feel free to [get in touch with](mailto:info@k15t.com) us and I'll be happy to send you the details.

Best,

Nils


author: Sami Moran
body: I wrote a procedure to help users at our site who were having trouble with this macro. Take a look and see if it works for you. Feedback welcome. (If I can figure out how to get the screen captures included here, I'll add those later.) :-)

Hope this is helpful to someone!

----------------------------------------------------------------

How to create a graphic with multiple links using an image map and the Image Map Macro

Confluence uses a combination of two macros to define image maps:

* ImageMap Macro
* Map Macro

For a complex image, the most difficult part of this process is defining the clickable regions of the graphic and capturing the coordinates to define those regions. You have to get coordinates for your image outside of Confluence. Luckily, there's a web tool that can help with this part (although it isn't the most intuitive tool out there).

Follow these steps to create an image map with multiple links.

**Step 1: Define the boundaries of the clickable regions in your image.**

1. Go to [http://www.image-maps.com.](http://www.image-maps.com./)

2. Upload your image to the site.

3. Click **Start Mapping Your Image**.

4. On the page showing your image in the top left corner, scroll down the page and enable **Image/Map Coordinates**.

5. Scroll back up and click **Custom Shape** .   

Your cursor changes to a crosshair.

6. Using your mouse, click at different points around the boundary of an area that you   
want to be a clickable region.  
**Note:** How many points you should define depends on the complexity of the graphic.   
If it's a triangle, you probably only need 3. For more complex shapes, you'll need more   
points to clearly define the boundaries of the clickable region.

7. Scroll down to the Image Map Coordinates. Copy *all* of the text from this field and save it to a text editor. These are the coordinates that will define the area of your clickable region.   

**Note:** Each point on the image is represented by two numbers. Together the number pair is a *coordinate* that represents a point on the boundary of your clickable region.

8. To define another clickable region, click **Reset** to clear the boundary points from your image and repeat this procedure starting with Step 5.

**Step 2: Place the image map with coordinates on your wiki page.**

1. Go to the wiki page you where you want to place the image map.

2. Attach the original image to the wiki page (**Tools-\>Attachments**).

3. Open the page for editing.

4. Insert an ImageMap macro (**Insert-\>Other Macros**).

5. Configure the macro as follows:

? If the image is attached to a different page, specify the name of that page. Titles are case sensitive.

? Click the drop-down to select the Image Attachment.

? You can change the width and height of the image here, if you want to.

6. Click **Save**.

7. Place your cursor inside the ImageMap Macro placeholder, then insert a Map Macro   
(**Insert-\> Other Macros**).

Configure the Map Macro as follows:

? link (required) -- URL for the region's target link.

? shape -- Specify the shape of the clickable region.

? coords (required) -- Paste the coordinates you captured in Step 6 of the previous   
procedure.

? title -- Specify any tooltip text you want to appear when a mouse hovers over the   
region.

? target *(I don't know what this one does. Help, anybody???)*

8. Click **Insert**.

9. Repeat Step 4 through Step 8 for each clickable region in your image.

10. Save your page.

11. Test the links in your image map.

12. Take a bow (or have a beer!).

comments: author: Heidi Lobecker
body: Hi Sami, this was very very helpful. Thank you for taking the time to write it up.We are using image maps as a UX tool in our current space and this was very helpful.Cheers, Heidi Lobecker


author: Tal Goldenberg
body: The plugin works fine when it comes to 4 digits coords, but what if I want to create mapping of a more complicated shape the square ? For example : 124,99,216,223,118,354,414,348,509,224,420,101 (Hexagon).

Thanks,

Tal


author: Nils Bier _K15t_
body: Hi everyone,

We're happy to announce that we recently dusted off the [ImageMap Macro for Confluence](https://marketplace.atlassian.com/plugins/de.dl.confluence.plugin.imagemap.ImageMapPlugin/server/overview) and redeveloped it from scratch for Confluence Cloud and Confluence Server.

[**Join the Scroll ImageMap Private Beta Test**](https://www.k15t.com/events/scroll-imagemap-private-beta-sign-up)  
Beta testers receive:

* Pre-release versions of Scroll ImageMap for testing
* Early access to beta documentation

Thank-you rewards:

* A free one-year Scroll ImageMap license
* The ability to have your feedback prioritized and considered directly by the product team
* The opportunity to work with a game-changing new tool

What we ask:

* Install Scroll ImageMap and begin testing
* Document feedback/suggestions/bugs during testing
* [Share feedback](https://help.k15t.com/scroll-imagemap/server/feedback-114110286.html) by Friday, August 31

This beta will be available to a very small group, and we will run out of spots quickly. [**Register now**](https://www.k15t.com/events/scroll-imagemap-private-beta-sign-up) if you wish to join, and thanks as always for your interest and support!

If you're interested in Scroll ImageMap for Confluence Cloud, [please let us know](mailto:info@k15t.com) and we'll be happy to get in touch.

Best,  
Nils

comments: author: francoisj
body: We have just upgraded from Confluence 5.8.18 to 6.0.3. We were using the old ImageMap macro extensively in our Quality Management System on Confluence Server.

Now we find out the ImageMap macro disappeared and that Scroll ImageMap add-on must now be used.

The problem is that all our QMS pages shows "unknown macro" if I disable the Scroll ImageMap addon. If I enable the addon, all I get is an XML error and I cannot even edit the page.

Is there a quick solution to this problem? This will cost us a lot in manpower to fix this problem.

Regards,

Francois


author: Nils Bier _K15t_
body: Hi Francois,

Thanks for reaching out.

Which version of the ImageMap macro have you tried using with Confluence 6.0.3?

Have you already tried to install the [latest version of Scroll ImageMap](https://marketplace.atlassian.com/plugins/de.dl.confluence.plugin.imagemap.ImageMapPlugin/versions) (2.0.5) from the Atlassian Marketplace and tried to edit your pages? Does that work?

If you also get the mentioned XML error, please send us a Confluence Support ZIP and a XML export of an affected page to [support@k15t.com.](mailto:support@k15t.com.)

We'll then further investigate and will come back to you.

Best,  
Nils


author: Nitesh Nema
body: Adding to what [Sami Moran](https://answers.atlassian.com/questions/users?username=sami%20moran) mentioned earlier-

One suggestion on **Step 1: Define the boundaries of the clickable regions in your image simpler / safer way(Incase you do not want to upload image on internet).**

1. Goto MSPaint or any picture tool which will tell the pixel coordinate on mouse hover.
2. For 'rect' Map Macro area, note two points(x,y) on diagonal of rectangular area on image. And enter those points (x,y) coordinates in 'coords \*' as (132, 23, 153, 78)

-


author: Vitalii Burlai
body: Hello,

There is an issue with PDF/HTML export of imagemap macro listed here: [what to do if you get "error rendering macro 'imagemap' : null](https://answers.atlassian.com/questions/130508)

Please take a look.

*** ** * ** ***

HTML and PDF exports do not work and throw NullPointerException.

The problem is in ImageMapPlugin.java file at line 88.

Here are some details from server log:

-- referer: <http://127.0.0.1:8080/spaces/exportspacehtml.action?key=space> \| url: /spaces/doexportspace.action \| userName: administrator \| action: doexportspace  
java.lang.NullPointerException  
at de.woeschbach.confluence.imgmp.ImageMapPlugin.execute(ImageMapPlugin.java:88)  
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

comments: author: Michael Foster
body: Still an issue with the latest release as at 20 May 2015.


author: Michael Regelin
body: Hello,

We have migrate from Confluence 4.3.7 to Confluence 5.6.4.

The plugin has also been updated to the last version.

All pages that host the macro image-map and map dont work anymore.

The absolute page name is missing?

image2014-12-1 14:48:57.png

This is true on every page of Confluence.

What went wrong ?

I dont have any log to show you.

Thanks for your help.

This is a production server, so a help will be highly appreciate!

Sincerly,

Michael

[](https://community.atlassian.com/t5/Confluence-questions/ImageMap-Plugin-how-to-use/qaq-p/140275?attachment-id=4572){#link_118b4cda95e6b7}  
[](/tnckb94959/attachments/tnckb94959/confluence-questions/23263/1/image2014-12-1%2014%3A48%3A57.png){#display_118b4cda95e6b7_0}


author: Christina Schantin [Communardo]
body: First, you select a form for example an rectangle. Then, the macro needs the coordinates in this form: 114,100,1243,720

Means the image map starts in the image 114 pixel from the left side of the picture, 100 pixel from top and ends 1243 pixel from the left side of the picuture and 720 pixel from top.

comments: author: Test test
body: Thanks for your help. But it does not run..

How I can test the result? I click on the Picture on the specified region and wait for reaction. The title does not on display too. Hmm. Maybe it is there a problem with the Image Preview? With one click the Preview going in max screen. When must it work?

I can see:

\<area shape="rect" coords="1,1,400,400" href="/display/TEST/Test2" title="qweasd" target="_blank"\>


author: Tal Goldenberg
body: The plugin works fine when it comes to 4 digits coords, but what if I want to create mapping of a more complicated shape the square ? For example : 124,99,216,223,118,354,414,348,509,224,420,101 (Hexagon). Thanks,Tal


Tags: image-map