How do I add multiple Links to an image? (Map/Process Diagram)

[Theo Whitwill]

Hi Guys,

I'd like to be able to add multiple links to the same image in confluence. A good example is that we have different production locations in our company and I want to be able to link them all to one image, so our users can just click on the geographical area.

This function would also be useful for our process diagrams, where the different spaces could be accessed by clicking on the different process stages in the image.

I'm uploading a small image of North America as an example.

The two links would be "USA" & "Canada".

I'm open to other suggestions. It doesn't have to be the same image. I've tried using multiple images and adding a link to each one but this is impractical and doesn't look good. (The World Map doesn't have straight lines and there's always a gap between the images)

Thank for the support,

Theo

[Bob Swift OSS (Bob Swift Atlassian Apps) · Accepted solution]

imagemap macro - see https://marketplace.atlassian.com/plugins/de.dl.confluence.plugin.imagemap.ImageMapPlugin

[Jonathan Simonoff]

Bob (or anyone) do you know how to use that thing? The Documentation link takes me to an unrelated page, and I don't see any fields in the macro browser for adding the link map.

[Bob Swift OSS (Bob Swift Atlassian Apps)]

Yes, I used it some time ago. Looks like the documentation is missing because of the demise of plugin studio. Let me try to find an example.

[Jonathan Simonoff]

Found an example. You put map macros inside the image map, and specify the links in those.

[Vishnukumar Vasudevan]

Hi All,

Is there any document which helps to use this plugin ?

Regards, Vishnu.

[MatthewC]

For anyone looking for link (like I was..) here's a web editor to create the mapping coordinates

http://www.image-maps.com/PHP_Map_Image.php

[Christian Prediger]

I would also really need sth like that. I would assume many users would need a possibility to show a process or workflow description and link components to a more detailed description page.

I already tried to use PlantUML for process description and linkage on subpages. Also that is not at all sufficient, I could only find a workaround and only for activity diagrams (which in other apsects do not fit my need) and that leads to bad looking links under embedded text.

Anyone more successful doing that yet?

[Big Jim]

Thanks Brian,

To answer my own question I tried Creately but the url link always opened in a new undocked window so I finally settled on Gliffy which works perfectly. Hope this helps others.

[Ramasubramanian Balasundaram]

Hi, Can you please let me know how you did this with Gliffy?

Thanks, Ram.

[Big Jim]

In Gliffy you can add text. There is a create link button. Add the link to your text which is placed in a shape and you are good to go.

[Red Morley Hewitt]

Thanks for clarifying. I've since found a site called imagemap, which allows me to draw custom shapes on an existing image and then grab the html.

[Matthew Tomlin]

I was able to use Visio to create a diagram and then save it as SVG.  Once in SVG format, open it in any text editor and add the links as html tags (<a href= "mylink"> </a>) around the shape.  Then you can paste the svg code into an html macro on your confluence page.   I created anchors in the confluence page for the different sections and then copied those anchor links into the html.

I hope this helps

[Patrick O_Connell]

Hey Theo,

Sorry that this answer is so long in coming, but (and I think this happens often, here) I only came across this when searching for a solution of my own.

The Confluence installation with my employer is 100% no frills, i.e. no macros, so creativity? A must. (And I get, and support, why they're reluctant to add any macros).

And with a bare-bones installation, the only way I can think of doing this would be: 

1. Create the shapes for the U.S. and Canada in something that can export to SVG (e.g., Illustrator, or Inkscape).
2. in SVG format, bring those shapes into Gliffy as part of a library of custom shapes.
3. Place them in your diagram, then assign to them the links that you want to.

The reason you don't start in Gliffy is that you can't create that kind of freeform, complex, multi-point shape inside of it.

Hope this helps,
Pat O'Connell
Technical Writer
MindGeek / Montreal

[Deleted user]

HOW TO LINK TO AN ANCHOR WITHIN THE SAME PAGE?

I am using the add-o and it works OK.
But it does not have the option to open a link with-in the same page (using an anchor).
Doc link not working for me.
Any idea?

[Big Jim]

I'm also looking for a solution to this. Want to add a graphic with multiple links. Is this really not possible ?

[Brian Blackwell]

I understand the HTML markup needed to add hyperlinks to a confluence page, however, every time I try and add the HTML code to the confluence page it is removed upon filing.  Was this an issue that anyone else trying to address this issue came across?

PS - The ImageMap add-on is apparently no longer supported by Atlassian.

[Marinda]

We're having the same problem . . . 

[Red Morley Hewitt]

I would easily recommend image-maps, I've used it several times now. Grabbing and changing the HTML is easy

[Red Morley Hewitt]

Jonathan, are you able to share the example you found as I'm still struggling?

Thanks

[Jonathan Simonoff]

Red, sorry I don't know if I can find that example again. What I said was the meat of it, though -- you put map macros inside the imagemap macro. The map macros specify an area and a link, so you put one in for each link in the map.