Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Overlaying Graphics - Using Behaviours

HTML and JavaScript using FrontPage/Expression behaviours


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 herearrow 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.

Ford Anglia - circa 1953
Image 1
Frog Eyed Sprite
Image 2
 
    Image that is swapped
Image 3

HTML

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 
<span style="position: relative;"><a id="id1" href="javascript:;"
onmouseout="FP_changePropRestore()" 
onmouseover="FP_changeProp(/*id*/'arrow',1,
'style.visibility','visible')">
<em>here</em></a><img id="arrow" 
src="~/fp/articles/images/arrow1.gif" alt="arrow" /></span>
an arrow appears pointing to Image-3&nbsp; 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.

<a id="id1" href="javascript:;" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'arrow',1, 'style.visibility','visible')"> - this is the main part of the hyperlink that displays/hides the arrow. Hover events (onmouseover, onmouseout) on the link fire behaviours which essentially change the visibility of the arrow. onmouseover shows the arrow, and onmouseout hides it again.

CSS

.sp1 {
position:relative;
font-style:italic; 
}
#arrow {
position: absolute;
z-index: 1;
left: 1em;
top: .2em;
width:195px;
height:20em;
visibility:hidden;
}

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.

Alternative

An alternative to using the behaviours supplied with FrontPage and Expression Web is custom written JavaScript. One easy method is to use jQuery. See the next page for a jQuery solution.

Also see the code comparison between the behaviours and jquery methods.