Clickable areas inside image

Clickable areas inside image

Searching for some design suggestions. I am using Angular (at least
trying). Suppose I have a clickable areas defined like this with
backgrounded image (more than two):
<div id="clicable0">
<div class="area1" data-ng-click="jump('index.jsp#/v1')"></div>
<div class="area2" data-ng-click="jump('index.jsp#/v2')"></div>
...
<img src="img1.jpg">
</div>
My CSS (I would keep that because it is nice to position areas in
'run-time'):
#clicable0 .area1 { top:100px; left:100px; }
#clicable0 .area2 { top:100px; left:200px; }
The above example works just fine, but I would see this more like general
component (directive?) where I could do more on the Angular and
Javascript. What would be your suggestions to 'opaque' this with some
Angular futures? Thanks.