# Image with image map for circular anatomic direction/location

**Category:** [Tools](https://discourse.openehr.org/c/tool-dev/36)
**Created:** 2022-06-13 17:30 UTC
**Views:** 458
**Replies:** 0
**URL:** https://discourse.openehr.org/t/image-with-image-map-for-circular-anatomic-direction-location/2717

---

## Post #1 by @erik.sundvall

Hi!

I tried googling for some open sourced image with corresponding image map of "clock based" circular direction, but failed. The intention was to use it as a demo in a GUI for the "coded text" option in the archetype [Circular anatomical location](https://ckm.openehr.org/ckm/archetypes/1013.1.1995) in form building tools like Better's EHR Studio:
![image|690x293, 75%](upload://yANdl1iUtghA3HHitSV2mZxvqOI.png)


So I quickly hacked one using wikimedia image https://commons.wikimedia.org/wiki/File:Horlo%C4%9Do_001.svg
![clock|300x300, 50%](upload://97DN5EOgPpl8WFZJXFT0HHMT7HI.png)

... using  http://www.image-map.net/ to add interactive slices:
```
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="clock.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="1" title="1" href="" coords="154,145,196,0,300,1" shape="poly">
    <area target="" alt="2" title="2" href="" coords="152,148,299,2,299,110,153,149,152,148" shape="poly">
    <area target="" alt="3" title="3" href="" coords="152,148,300,112,299,192" shape="poly">
    <area target="" alt="4" title="4" href="" coords="151,150,299,192,300,299" shape="poly">
    <area target="" alt="5" title="5" href="" coords="151,151,298,298,194,299" shape="poly">
    <area target="" alt="6" title="6" href="" coords="150,152,192,299,105,298" shape="poly">
    <area target="" alt="7" title="7" href="" coords="0,299,151,148,104,297" shape="poly">
    <area target="" alt="8" title="8" href="" coords="0,194,147,151,1,296" shape="poly">
    <area target="" alt="9" title="9" href="" coords="1,194,151,150,0,107" shape="poly">
    <area target="" alt="10" title="10" href="" coords="0,107,0,0,152,149" shape="poly">
    <area target="" alt="11" title="11" href="" coords="0,2,151,147,109,0" shape="poly">
    <area target="" alt="12" title="12" href="" coords="153,149,110,1,196,0" shape="poly">
</map>
```
I share it here in case somebody else runs into the same problem.
 
Does anybody have a better looking or othewise better image+image map with similar use/purpose, then please share here. (Or improve this hack and share the result in a reply.)

---


**Canonical:** https://discourse.openehr.org/t/image-with-image-map-for-circular-anatomic-direction-location/2717
**Original content:** https://discourse.openehr.org/t/image-with-image-map-for-circular-anatomic-direction-location/2717