ImageMap Plugin - how to use

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

And where is the reference to the image?

8 answers

1 accepted

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>

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

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>

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

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

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

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.

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

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

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

 

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 

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)

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

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)

-

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

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

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

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

377 views 20 10
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you