How can i add callouts to images like in docbook? See an example here: http://norman.walsh.name/2006/06/10/imageobjectco
The callout points can be drawn on the image, but when i try to generate document from this:
image::img/stg.png[width=400,align="center"]
<1> Blabla.
<2> Foobar.
<3> Aknathnaratnathgarat.
... it drops an error:
asciidoc: WARNING: manual.adoc: line 580: no callouts refer to list item 1
asciidoc: WARNING: manual.adoc: line 581: no callouts refer to list item 2
asciidoc: WARNING: manual.adoc: line 582: no callouts refer to list item 3
It's important to understand that asciidoc uses docbook, looking for it in docbook I just found out how to do this:
++++
<mediaobjectco>
<imageobjectco>
<areaspec id="map1"
units="calspair">
<area linkends="callout1"
coords="1000,5000 6000,8000"
id="area1"/>
</areaspec>
<imageobject>
<imagedata fileref="images/notredame.png" />
</imageobject>
<calloutlist>
<callout arearefs="area1"
id="callout1">
<para>My only callout</para>
</callout>
</calloutlist>
</imageobjectco>
</mediaobjectco>
++++
You can copy and paste in asciidoc and it will work (the ++++
operator let you put docbook code inside asciidoc). Of course you will have to have the image at images/notredame.png
to work, I have used this image.
To understand more look for docbook documentation:
- http://www.sagehill.net/docbookxsl/Imagemaps.html (this example was extracted from there)
- http://www.docbook.org/tdg/en/html/callout.html
- http://www.sagehill.net/docbookxsl/PrintIcons.html
NOTE: Asciidoc uses docbook 4.5, when looking at documentation skip 5.0 tags.
From time to time is need this feature in my books, but I end up puting a label in the image (like mapa_a.png and this one mapa_b.png), and put them side by side in a table with inline image. You can see inline images in this file, find for image:images/cap4
).
It's not a real solution but partly acts like the original callouts:
:callouts: /usr/share/xml/docbook/stylesheet/docbook-xsl/images/callouts/
image::img/stg.png[width=400,align="center"]
image:{callouts}/1.svg[] Blabla. +
image:{callouts}/2.svg[] Foobar. +
image:{callouts}/3.svg[] Aknathnaratnathgarat.