ImageMap Plugin - how to use

[Test test]

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

And where is the reference to the image?

[Christina Schantin [Communardo] · Accepted solution]

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>

[Test test]

Nice one. I did not realize the context between this both macros. It work!

[dzuluaga]

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>

[Nils Bier _K15t_]

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 us and I'll be happy to send you the details.

Best,

Nils

[Sami Moran]

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.

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

[Heidi Lobecker]

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

[Tal Goldenberg]

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 

[Nils Bier _K15t_]

Hi everyone,

We're happy to announce that we recently dusted off the ImageMap Macro for Confluence and redeveloped it from scratch for Confluence Cloud and Confluence Server. 

Join the Scroll ImageMap Private Beta Test

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 by Friday, August 31

 This beta will be available to a very small group, and we will run out of spots quickly. Register now 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 and we'll be happy to get in touch.

Best,
Nils

[francoisj]

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

[Nils Bier _K15t_]

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

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

Best,
Nils

[Nitesh Nema]

Adding to what Sami Moran 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)

-

[Vitalii Burlai]

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

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)

[Michael Foster]

Still an issue with the latest release as at 20 May 2015.

[Michael Regelin]

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

[Christina Schantin [Communardo]]

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.

[Test test]

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

[Tal Goldenberg]

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