[index] [home]

Tweet

Using Dot-generated graphs as clickable HTML nodes

An image-map is basically a set of coordinates, adding hyperlink-areas to an image.

Using Dot with options -Tcmapx -o MyMapFile.map generates such an image-map in addition to the normal output-image. Both can then be used in an HTML-page to allow for graphs with clickable nodes.

Generating the map

In the dot-file,

  1. name the graph, which will be used as map-name in HTML
  2. use the URL node-attribute to make it clickable.

Example dot-snippet:

    digraph X
    {
        a [ URL = "http://a.com/" ]
        b [ URL = "local.html"    ]
        a -> b
        ...

Generating both graphics- and map-file output:

    dot d.dot -Tpng -o d.png -Tcmapx -o d.map

...which would generate d.png and corresponding map d.map.

Using the map in HTML

Map-output looks something like this:

    <map id="X" name="X">
    <area shape="poly" id="node1" href="http://a.com/" title="a" alt="" coords="257,29,256, ...
    <area shape="poly" id="node2" href="local.html" title="b" alt="" coords="221,125,220, ...
    ...
    </map>

...which can be used in an HTML-file alongside the generated pic, like this:

    <html><head/><body>
    <img src="d.png" usemap="#X"/>
    <map id="X" name="X">
    <area shape="poly" ...
    ...
    </map>
    </body></html>

(Making this 100% HTML-compliant is left as an exercise for the reader.)


Delivered to you by Vim, GNU Make, MultiMarkdown, bozohttpd, NetBSD, and 1 human.