Skip Navigation | Groups

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

 

Other Pages expandmenu

Overlaying Graphics

Using layers to place an image over text or other images

How to place an arrow between two points

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
  1. Create the arrow to the approximate size and direction in an image editor and save somewhere on the computer. Do not use graphics from the FrontPage Drawing Toolbar or Microsoft Office autoshapes - see VML-graphics for reasons why.
  2. Import the image into the website.
  3. Open FrontPage and the website, then open the page.
  4. Create a layer - Insert->Layer. The layer must not be created within a table cell.
  5. Move the layer, and resize it, until it fits between the two points of the page where the arrow is to be placed.   Bear in mind that if the font size is changed, the arrow's target will move, but the arrow itself will remain fixed in the same position. The arrow will have to be "flexible". Use View->Text Size and change the font size to see what happens in this page.
  6. Drag the image into the layer from the folder list, and adjust the image size to fit.
  7. Adjust the layer size to fit the image. Often deleting the height and width is the easiest way. In this page the layer itself was deleted, but the width, height and position information transferred to the arrows styles -
     #arrow {position: absolute; z-index: 1; left: 1em; top: .2em; width: 195px; height: 20em;}
    The height and width (20ems and 195px) was found by trial and error, and to an extent allows for browser window and font size changes.
  8. The HTML, JavaScript and CSS are described on the next pages:

    • FrontPage/Expression Web Behaviours.

      Note that these Behaviours 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.

    • jQuery

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