Pop-out Elements: The Entire Script - Doc JavaScript

The Entire Script

<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
var maxZ = 1;
function popout(id, posY, width) {
  this.id = id; // the element's name (and the variable's name)
  this.posY = posY; // the element's top property
  this.width = width; // the element's width
  this.show = false; // do not show the element
  this.makeImage = makeImage; // constructs the image's tab
  this.makeElement = makeElement; // constructs the content box
  this.showElement = showElement; // sets the element's visibility
}
function makeImage(imgURL, imgHeight, imgWidth, imgAlt) {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', this.id, 'img {',
      'position: absolute;',
      'left: 0; top: ', this.posY, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', this.id, 'img">',
    '<A HREF="javascript:', this.id, '.showElement()">',
    '<IMG SRC="', imgURL, '" ALT="', imgAlt, '" BORDER="0" ',
    'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
    '</A></DIV>'
  );
}
function makeElement(boxBg, boxColor, boxCode) {
  var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
  document.write(
    '<STYLE TYPE="text/css">',
    '#', this.id, 'box {',
      'position: absolute;',
      'left: 0; top: ', this.posY, ';',
      'width: ', this.width, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: hidden;',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', this.id, 'box">',
    boxCode,
    '</DIV>'
  );
}
function showElement() {
  this.show = !this.show;
  var pos = (this.show) ? this.width : 0;
  if (NS4) {
    var str = (this.show) ? 'show' : 'hide';
    eval('document.' + this.id + 'img.left = ' + pos);
    eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
    eval('document.' + this.id + 'box.zIndex = ' + maxZ);
    eval('document.' + this.id + 'box.visibility = "' + str + '"');
  } else {
    var str = (this.show) ? 'visible' : 'hidden';
    eval(this.id + 'img.style.left = ' + pos);
    eval(this.id + 'img.style.zIndex = ' + (++maxZ));
    eval(this.id + 'box.style.zIndex = ' + maxZ);
    eval(this.id + 'box.style.visibility = "' + str + '"');
  }
}
function styleEnabled() {
  return ((NS4 && document.test) || IE4);
}
function init() {
  if (!styleEnabled()) return;
  menu1 = new popout('menu1', 300, 90); // a global variable
  menu1.makeImage('columns.gif', 130, 18,
                  'JavaScript Columns');
  menu1.makeElement('beige', '#0000cc',
    '<A HREF="/js/column1/">Column 1</A><BR>' +
    '<A HREF="/js/column2/">Column 2</A><BR>' +
    '<A HREF="/js/column3/">Column 3</A><BR>' +
    '<A HREF="/js/column4/">Column 4</A><BR>' +
    '<A HREF="/js/column5/">Column 5</A><BR>' +
    '<A HREF="/js/column6/">Column 6</A><BR>' +
    '<A HREF="/js/column7/">Column 7</A><BR>' +
    '<A HREF="/js/column8/">Column 8</A><BR>' +
    '<A HREF="/js/column9/">Column 9</A><BR>' +
    '<A HREF="/js/column10/">Column 10</A><BR>' +
    '<A HREF="/js/column11/">Column 11</A><BR>' +
    '<A HREF="/js/column12/">Column 12</A><BR>' +
    '<A HREF="/js/column13/">Column 13</A>'
  );
  menu2 = new popout('menu2', 440, 200); // a global variable
  menu2.makeImage('examples.gif', 130, 18,
                  'JavaScript Examples');
  menu2.makeElement('beige', '#0000cc',
    '<IMG SRC="/js/pharmacy/docjx.gif" WIDTH="55" ' +
    'HEIGHT="60" HSPACE="2" ALIGN="right">' +
    '<A HREF="/js/pharmacy/menu.html">A Popup Menu</A><BR>' +
    '<A HREF="/js/pharmacy/date.html">A Text Date</A><BR>' +
    '<A HREF="/js/pharmacy/form.html">A Feedback Form</A><BR>' +
    '<A HREF="/js/pharmacy/tbanner.html">A T-banner</A><BR>' +
    '<A HREF="/js/pharmacy/counter.html">A Personal Counter</A><BR>' +
    '<A HREF="/js/pharmacy/password.html">A Password Protector</A><BR>' +
    '<A HREF="/js/pharmacy/frames.html">A Frames Destroyer</A><BR>' +
    '<A HREF="/js/pharmacy/countdown.html">A Date Countdown</A>'
  );
}
init();
// -->
</SCRIPT>