Displaying the Info Box

All that remains now is display the info box when the mouse hovers over the image. This is the job of the pop function that is called up from each table cell.

29: function pop(texte,fond)
30: {
31:
32: var contenu ="<TABLE WIDTH=200 BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#352F7F><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT FACE='ARIAL' COLOR=#FFFFFF SIZE=2><B>Info box...</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+fond+"><TR><TD><FONT COLOR=#000000 SIZE=1 face=Verdana><CENTER>"+texte+"</TD></TR></TABLE></TD></TR></TABLE>";
33:
34:   if (ns)
35:   {
36:     skn.document.write(contenu);
37:     skn.document.close();
38:     skn.visibility = "visible";
39:   }
40:     else if (ie)
41:   {
42:     document.all("topdeck").innerHTML = contenu;
43:     skn.visibility = "visible";  
44:   }
45: }

We will start by creating the contenu variable on line 32, which is used to store the HTML code responsible for displaying the caption text (contained in the texte variable defined earlier) over the given background colour (contained in the fond variable).

We then have to dynamically write the HTML code inside the topdeck layer.

• With Netscape, it is very simple: skn.document.write(contenu) puts the HTML code contained in our variable onto the layer referenced by skn.
  
  
• As for Internet Explorer, we have to change the innerHTML property of the targeted layer object: document.all("topdeck").innerHTML = contenu writes the HTML code of our variable onto the layer referenced by topdeck.