How to place an arrow between two points
Note that his example uses FrontPage/Expression Web Behaviours that were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.
If you hover the mouse here an arrow appears pointing to Image-3 below.
This example works best when the font-size is fixed, and the user does not adjust it. Unfortunately, users cannot be stopped from adjusting font sizes to suit their own needs. For example, the user may need larger fonts to see the text, or to compensate for a very high resolution screen on a small Tablet PC. Changing the font size will change the position of the arrow's endpoints, and will also change the position of Image-3 - the arrow's top endpoint is fixed relative to the word "here", but not fixed relative to the page. In other words - the arrow will move as text is resized.
The first paragraph on this page contains the HTML for the arrow and the link that displays it. This is shown below:
<p>If you hover the mouse
src="~/fp/articles/images/arrow1.gif" alt="arrow" /></span>
an arrow appears pointing to Image-3 below. </p>
<span style="position: relative;"> creates a <span> that will contain the arrow, and also the link that displays and/or hides it. The <span> will obviously move with the text as the browser is resized, or as the text is resized, and the arrow, being within the <span>, will move with it.
<img id="arrow" src="~/fp/articles/images/arrow1.gif" alt="arrow" /> is the arrow. CSS sets it's position to absolute, which means when the arrow is displayed it will display over the page content, rather than shift the page content out of its way.
The above CSS sets the <span> to position:relative, and sets the size and position and initial visibility (hidden) of the arrow. Using position: absolute enables the arrow to float over the page content.
Also see the code comparison between the behaviours and jquery methods.