[previous] [next] WebDot Tutorial: Client-side maps

In order to support client-side maps, WebDot can filter an html page and replace all occurrences of <webdot...> tags with a client-side map and an image reference. For example, clientmap.dot contains:
graph G {
        node [URL="\N.html" label="" tooltip="\N" width=0.3 height=0.3 style=filled fillcolor=lightblue pencolor=black]
        a -- b -- c; b -- d;
and the source of this page contains (for the graph on the right):
<webdot src="/cgi-bin/webdot/webdot/clientmap.dot" engine="neato" type="png" target="new">

after serving this page through /cgi-bin/webdot, this <webdot...> tag is replaced by:
<map name="webdot0">
<area shape="rect" href="/cgi-bin/webdot/http://localhost/cgi-bin/webdot/webdot/clientmap.dot.neato.png.help" title="Graph by WebDot" alt="Graph by WebDot" coords="147,240,235,228">
<area shape="rect" href="http://localhost/webdot/a.html" title="a" alt="" coords="8,132,37,161" target="new">
<area shape="rect" href="http://localhost/webdot/b.html" title="b" alt="" coords="108,105,137,135" target="new">
<area shape="rect" href="http://localhost/webdot/c.html" title="c" alt="" coords="180,179,209,208" target="new">
<area shape="rect" href="http://localhost/webdot/d.html" title="d" alt="" coords="135,7,164,36" target="new">
<img src="/cgi-bin/webdot/http://localhost/cgi-bin/webdot/webdot/clientmap.dot.neato.png"
        width="235" height="240" border="0"
        alt="Graph by WebDot">

The advantages of this mode of WebDot are the much simpler authoring and the responsiveness of client-side mapping. Notice that the URL that would be reached by clicking on a node is flashed into the status bar at the bottom of the browser.

The disadvantages are that the html source now contains non-standard markup and the page has to be served through the /cgi-bin/webdot program. Care must be taken that relative URLs in the html don't also get served through the WebDot cgi program so it is important to use "rooted" hrefs in documents and graphs served this way.

Embedded SVG is probably a better choice assuming SVG clients are available.