Can you use a html macro (HTML Image macro) to insert an image map?
Asked by 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.


Answers:
author: Michelle Rau HP
body: (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.](https://summerstyle.github.io/summer/) (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](https://html.com/images/how-to-make-an-image-map/)

* [Gimp image map tutorial](https://www.gimp.org/tutorials/Image_Map/) (2002) or [How to Make an Image Map Using GIMP: 7 Steps](https://www.instructables.com/id/How-to-Make-an-Image-Map-Using-GIMP/)

* <https://www.adaptavist.com/doco/display/CFP/HTML+Image>

* <https://html.com/attributes/area-shape/>


author: AnnWorley
body: 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](http://imagemap-generator.dariodomi.de/).

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


author: AnnWorley
body: 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](https://marketplace.atlassian.com/plugins/com.adaptavist.confluence.contentFormattingMacros/server/overview).

Here is the documentation for the macro: [HTML Image](https://www.adaptavist.com/doco/display/CFP/HTML+Image)

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


author: Ashwini
body: 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?


author: AnnWorley
body: 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](https://confluence.atlassian.com/doc/html-macro-38273085.html), (not the HTML Image macro by Adaptavist).


Tags: image-map