Step 1

Copy this JavaScript function to the HEAD of your document.

<script language="JavaScript">
<!--
var IE = (document.all) ? 1 : 0;
var NN = (document.layers) ? 1 : 0;
var div_seen = false;
function div_over(which, on) {

  var div_str = '<table border=1 bordercolor=#99cccc cellpadding=5 bgcolor=#CCFFFF>'+
    '<tr><td>Her Technology is dedicated to bringing you information on a'+
    ' wide range of web-related topics without a lot of geek-speak. '+
    '<a href="javascript:void(\'Just Click\')" onclick="div_over(1,0)">Close</a>.'+
    '</td></tr></table>';

  if (IE) {
    whichEl = eval("document.all.div" + which + ".style");
  } else {
    whichEl = eval("document.div" + which);
  }
  if (on) {
    if (!div_seen) {
      whichEl.visibility='visible';
      if (NN) {
        with (document.div1.document) {
          open();
          write(div_str);
          close();
        }
      } else {
        div1.innerHTML = div_str;
      }
      div_seen = true;
    }
  } else {
    whichEl.visibility='hidden';
  }
}
//-->
</script>


Step 2

Copy this link to your file, then modify it to use your image:

<a href="javascript:void()" onMouseOver="div_over(1,1)" >
<img border=0 src="/graphics/logo.jpg"></a>


Step 3

Copy the DIV below at the end of your page, just BEFORE the /HTML tag.

<DIV id='div1' style='position:absolute; visibility:hidden; top:25px; left:150px; z-index:2; width:400; height:180; float:left;' onClick="div_over(1,0)">
</div>
</body>


Step 4

Customize for your page. You can do the following:

  1. Change the colors of the table in the div_str.
  2. Change the text in the div_str. Be careful. The string uses single quotes to delimit the string. Any SINGLE QUOTE inside the string must be escaped with a \ -- see the code where it says \'Just Click\'. You must also NOT put a carriage return inside your string. As you can see in the code, each segment of the string is delimited with ' and ', then there is a + to concatenate the segment to the following segment. The last segment simply has a ; (no +).
  3. Change the image src= to your image file name.
  4. Change the top: and left: in the DIV tag to be where you want the box to appear on the screen.
  5. Change the width: and height: in the DIV tag for the size of the box.