Webmaster

DHTML : Customised pop-up information boxes
Contents ]
Dr Benton

Filling the Layer

The information layer is now defined and follows the mouse pointer. But it is still empty. We are going to fill it by defining a few lines for our image table (lines 69 and 70).

Have a look at the following code snippet:

67:       <TD BGCOLOR=#0088CA>
68:         <A HREF="http://www.myweb.com/"
69:            onmouseout=kill();
70:            onmouseover="pop('<font size=2>Logo Size 1</font><br>Size: 100 x 100','#B3AFE9');">
71:         <IMG BORDER=0 SRC="logo1.gif">
72:         </A>
73:       </TD>

The previous code concerns one image in a table cell. The code for the other four cells will be similar, except that the caption for each image will be different.

When the mouse pointer moves over an image, a pop function displays the info box. This function receives two arguments at call time:

  • The content of the info box ('<font size=2>Logo Size 1</font><br>Size: 100 x 100'). You are free to insert any HTML content you want into this layer.

  • The background colour of the info box ('#B3AFE9').



  1   2   3   4   5   6   7