Can you use a html macro (HTML Image macro) to insert an image map?

[Ashwini]

I am migrating content from Madcap flare to Wiki Confluence. One of the greatest contraints are the image maps. 

How do I use the HTML macros (HTML Image Macro) to add image maps. I have the HTML macros enabled.

[Michelle Rau HP]

(The previous answer to this question disappeared so I am updating my response.)

This method worked really well for me:

1. Used an online image map generating tool to generate the HTML. I used Summerstyle. (Be careful, one tool I found is a bitcoin mining site.) (If you can't or don't want to use a free online tool like this, you can use any image editing tool that shows you xy coordinates for a specific pixel.) Clickable areas cannot overlap.

   <map name="#myflowchart">
   
   <area shape="rect" coords="568, 22, 668, 103" href="http://www.URL.com" title="System" alt="System"/>
   
   <area shape="rect" coords="367, 125, 467, 206" href="http://www.URL.com" title="Framework" alt="Framework"/>
   
   <area shape="rect" coords="362, 235, 470, 314" href="http://www.URL.com" title="Tool1" alt="Tool1"/>
   
   <area shape="rect" coords="367, 359, 467, 441" href="http://www.URL.com" title="Interface" alt="Interface"/>
   
   <area shape="rect" coords="164, 626, 264, 706" href="http://www.URL.com" title="Tool2)" alt="Tool2"/>
   
   </map>

2. Attached the image to the wiki page and copied its URL. Also wrote down image dimensions.
3. Inserted the HTML Image macro into the wiki page. Entered the image's URL as well as image dimensions, and specified a name for the image map (myflowchart). The image should display at 100% size or the map won't work right.
4. Inserted the HTML macro into the page and plugged in the HTML generated by the image map generating tool.
5. Tweaked the HTML slightly to add titles (tooltips on mouseover)
6. Tested all links.

I hope these steps help someone else. Some other pages that helped me:

• How to Make an Image Map » - HTML.com

• Gimp image map tutorial (2002) or How to Make an Image Map Using GIMP: 7 Steps

• https://www.adaptavist.com/doco/display/CFP/HTML+Image 

• https://html.com/attributes/area-shape/

[AnnWorley]

Yes, you can display an image map using HTML inside an HTML macro. If you don't have the HTML, you can generate it with a tool like: Easy Imagemap Generator.

[Ashwini]

Hi Ann, could you please tell me how to use the HTML Image Macro.  Some how it isn't working for me.

[AnnWorley]

I am sorry, I misunderstood and thought you were adding the image map in a Confluence "out of the box" HTML macro. I found the documentation for an HTML Image macro, made by Adaptavist as part of the add-on, Content Formatting for Confluence.

Here is the documentation for the macro: HTML Image

Please let me know where you are running into trouble when you use the macro.

 

[Ashwini]

Hi Ann, thank you for the information. It was very useful.

Using the HTML Image macro, I was able to add images that are on the web.

Is there some way that I can create a image map for an image that I create or that which is saved on my system?

[AnnWorley]

I haven't tried this but my understanding is you can use an imagemap generator like http://imagemap-generator.dariodomi.de/ to upload a file and create HTML for embedding it in the native HTML macro, (not the HTML Image macro by Adaptavist).