hotspots for images

[Carmela Patuto]

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

[Davin Studer]

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>

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>

[Rafael Corredor]

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