Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,299,297
Community Members
 
Community Events
165
Community Groups

hotspots for images

can one create hotpots on an image to have multiple links?

1 answer

What you are looking for is an image map. There is nothing in Confluence that can do an image map natively, but you can create a user macro that would allow you to do it. Here is code I created a little while back for this purpose. You will still need some utility to create the image map for you, but once you have the map html you can put it into the user macro map parameter along with the image in the body of the macro. There are many tools that can do this for you, but if you just want a web tool for this you could do it with http://www.image-maps.com. See the below screenshots for usage example. 

Macro Name:
image_map

Macro Title:
Image Map

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 05/15/2018

## @param Map:title=Map|type=string|required=true|desc=Enter the code for the map.

###########################################################################
## These are used for getting around velocity issues when writing jQuery ##
###########################################################################
#set($d = '$')

###########################################################################
## Use given ID if present otherwise generate one ##
###########################################################################
##if( $paramID && $paramID != "" )
##set( $id = $paramID )
##else
#set( $id = $action.dateFormatter.calendar.timeInMillis )
##end

<div id="container-$id">
$body
$paramMap
</div>

<script>
AJS.toInit(function(){
AJS.$('#container-$id img').attr('usemap', '#map-$id');
AJS.$('#container-$id img').attr('name', 'img-$id');
AJS.$('#container-$id img').attr('id', 'img-$id');
AJS.$('#container-$id map').attr('name', 'map-$id');
AJS.$('#container-$id map').attr('id', 'map-$id');
});
</script>

Capture.PNG

Capture1.PNG

This is the map code that I put in above.

<map><area  alt="" title="" href="https://www.google.com" shape="poly" coords="79,26,53,31,30,46,15,69,10,95,15,121,30,144,53,159,79,164,105,159,128,144,143,121,148,95,143,69,128,46,105,31" style="outline:none;" target="_self" /><area  alt="" title="" href="https://www.microsoft.com" shape="rect" coords="173,23,310,165" style="outline:none;" target="_self" /></map>

Hi,

I have tried it but it seems it does not work in the newer Confluence versions (7.13.4 in my case). Is it possible to review it? I have HTML macro disabled by default. I have also tried enabling it, but same result.

Thank you

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence

An update on Confluence Cloud customer feedback – June 2022

Hi everyone, We’re always looking at how to improve Confluence and customer feedback plays an important role in making sure we're investing in the areas that will bring the most value to the most c...

270 views 2 5
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you