Monday, December 11, 2023
 Popular · Latest · Hot · Upcoming
rated 0 times [  103] [ 4]  / answers: 1 / hits: 32763  / 15 Years ago, mon, february 16, 2009, 12:00:00

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.

More From » html


You have a couple options: svg or canvas.

From the looks of it you don't need these arrows to have any particular mathematical form, you just need them to go between elements.

Try WireIt. Have a look at this WireIt Demo (which has been deprecated). It uses a canvas tag for each individual wire between the floating dialog divs, then sizes and positions each canvas element to give the appearance of a connecting line at just the right spot. You may have to implement an additional rotating arrowhead, unless you don't mind the arrows coming in to each element at the same angle.

Edit: the demo has been deprecated.

Edit: Ignore this answer, @Phil H nailed it

[#99971] Sunday, February 8, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 70
Total Questions: 87
Total Answers: 117

Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
harleew questions