I have an HTML page with some textual spans marked up something like this:
...
<span id=T2 class=Protein>p50</span>
...
<span id=T3 class=Protein>p65</span>
...
<span id=T34 ids=T2 T3 class=Positive_regulation>recruitment</span>
...
I.e. each span has an ID and refers to zero or more spans via their IDs.
I would like to visualize these references as arrows.
Two questions:
- How can I map an ID of a span to the screen coordinates of the rendering of the span?
- How do I draw arrows going from one rendering to another?
The solution should work in Firefox, working in other browsers is a plus but not really necessary. The solution could use jQuery, or some other lightweight JavaScript library.