Mobilefish.com - Div example 3

<html>
<head>
  <title>Div example</title>
</head>
<body>

<script type="text/javascript" language="JavaScript" >
document.getElementsByClassName = function (needle) {
  var my_array = document.getElementsByTagName("*");
    var retvalue = new Array();
    var i, j;

    for (i = 0, j = 0; i < my_array.length; i++) {
      var c = " " + my_array[i].className + " ";
      if (c.indexOf(" " + needle + " ") != -1) retvalue[j++] = my_array[i];
    }
    return retvalue;
}

function addEvent(obj, evType, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, true);
    return true;
  } else if (obj.attachEvent) {
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    return false;
  }
}

function HelpHover() {
  if(this._hoverContents) {
    this._mousePosX = 0;
    this._mousePosY = 0;
    this._hoverItem = null;
    this._hoverContents = null;
  }
}

HelpHover.prototype.init = function() {
  var hh = this;
  var helpItems = document.getElementsByClassName('helphover');
  for (var i=0; i<helpItems.length; i++) {
    helpItems[i].onmousemove = function(e) {
      if (!e) var e = window.event;
      if (e.pageX || e.pageY) {
        hh.mousePosX = e.pageX;
        hh.mousePosY = e.pageY;
      } else if (e.clientX || e.clientY) {
        hh.mousePosX = e.clientX + document.documentElement.scrollLeft;
        hh.mousePosY = e.clientY + document.body.scrollTop;
      }
      hh._hoverItem = this;
      hh._hoverContents = document.getElementById(this.id+'Help');
      hh.move();
    }
    helpItems[i].onmouseout = function (e) {
      hh.out();
    }
  }
}

HelpHover.prototype.out = function() {
  if(this._hoverContents) {
    this._hoverContents.style.top = -10000+'px';
    this._hoverContents.style.left = -10000+'px';
    this._hoverItem = null;
    this._hoverContents = null;
  }
}

HelpHover.prototype.move = function() {
  this._hoverContents.style.top = this.mousePosY+20+'px';
  this._hoverContents.style.left = this.mousePosX-90+'px';
}

addEvent(window, 'load', function() {var hh = new HelpHover(); hh.init();});
</script>

<style type="text/css">
.helptext  {
     position: absolute;
     top: -5000px;
     left: -5000px;
     margin: 0;
     padding: 4px;
     color:#000000;
     text-align: left;
     width:150px;
     font-family: Verdana, Arial;
     font-size: 10px;
     border: 1px solid #000000;
     z-index: 1;
     background-color: #ffffff;
     -moz-border-radius: 3px;
     -moz-opacity: .85;
     opacity: .85;
     filter: alpha(opacity=90);
}

.helptitle{
     font-family: Verdana, Arial;
   font-size: 12px;
     color: #0000FF;
     font-weight: bold;
}
</style>

<a href="https://www.mobilefish.com" class="helphover" id="item123">
  <img src="../download/css/3dsmax7_teapot_red_mobilefish_small.gif" width="100" height="66" border="0" alt="teapot small" />
</a>
<div class="helptext" id="item123Help">
  <div class="helptitle">3D Studio Max Teapot</div>
  <br />
  Create a teapot with background.
</div>

</body>
</html>