function getElement(id) {
  var obj;
  if (document.all) { obj = document.all[id];}
  else { obj = document.getElementById(id);}
  return obj;
}

/*
吹き出し作成クラス

var obj = new hukidashi(id, src, setForId, dx, dy); コンストラクタ
引数について
id 吹き出しのオブジェクトのid属性
src インラインフレーム内の読み込むURL
setForId 吹き出しオブジェクトを追加する要素のid属性を指定
dx 吹き出しの表示する座標X（絶対座標）
dy 吹き出しの表示する座標Y（絶対座標）

obj.view(); 吹き出しが表示します。
obj.hide(); 吹き出しが消えます。

プロトタイプ宣言に吹き出しで使用する画像のURLや、要素のサイズをまとめてありますので、
適宜調整してください。
**/

var hukidashi = function (id, src, setForId, dx, dy)
{
  var setHukidashi = function (id, dx, dy, bkimg, height, width)
  {
    var res = document.createElement('div');
    res.className = 'hukidashi';
    res.id = id;
    res.style.height = height + 'px';
    res.style.width = width + 'px';
    res.style.position = 'absolute';
    res.style.top = dy + 'px';
    res.style.left = dx + 'px';
    res.style.backgroundImage = 'url(\'' + bkimg + '\')';
    res.style.display = 'none';
    return res;
  };
  //吹き出しを置くエレメントを指定
  this.set = getElement(setForId);
  //吹き出しの作成
  this.div = setHukidashi(id, dx, dy, this.imgHukidashi, this.hHeight, this.hWidth);
  //吹き出しの影の作成
  this.sdiv = setHukidashi(
    's' + id,
    (dx + this.shMoveX),
    (dy + this.shMoveY),
    this.imgSHukidashi,
    this.shHeight,
    this.shWidth
  );

  //インラインフレーム要素を作成
  this.iframe = document.createElement('iframe');
  this.iframe.id = 'f' + id;
  this.iframe.className = 'iframe';
  this.iframe.scrolling = 'no';
  this.iframe.height= this.ifHeight;
  this.iframe.width = this.ifWidth;
  this.iframe.frameBorder = this.iframe.border = 0;
  this.iframe.src = src;

  this.div.appendChild(this.iframe);
  this.set.appendChild(this.sdiv);
  this.set.appendChild(this.div);
};

hukidashi.prototype = {
  imgHukidashi :  './iframe/img/hukidashi.gif',   //吹き出しのイメージ
  imgSHukidashi : './iframe/img/shukidashi.gif',   //吹き出しの影のイメージ
  hHeight : 270,  //吹き出しの高さ
  hWidth : 270,  //吹き出しの幅
  shHeight : 290,  //吹き出しの影の高さ
  shWidth : 270,  //吹き出しの影の幅
  shMoveX : 20,  //吹き出しの影のずらし（横）
  shMoveY : -20,  //吹き出しの影のずらし（縦）
  ifHeight : 225,  //吹き出し内インラインフレームの高さ
  ifWidth : 220,  //吹き出し内インラインフレームの幅
  interval : 15,  //透明度の変更する間隔

  view : function ()
  {
    this.div.style.display = this.sdiv.style.display = 'block';
    if (!document.all) {
      this.setOpcUsedTimer('div', 0, 10);
      this.setOpcUsedTimer('sdiv', 0, 5);
    }
    else {this.setOpacity('sdiv', 5);}
  },
  hide : function ()
  {
//以下コメント部分はブラウザに負荷がかかりきれいに表現できないため現在は使用していません。
//    if (!document.all)
//    {
//      this.setOpcUsedTimer('div', 10, 0);
//      this.setOpcUsedTimer('sdiv', 5, 0);
//    }
//    else
//    {
//      this.div.style.display = this.sdiv.style.display = 'none';
//    }
      this.div.style.display = this.sdiv.style.display = 'none';
  },
  setOpacity : function (property, value)
  {
    this[property].style.filter = 'alpha(opacity=' + (value * 10) + ')';
    this[property].flt = value;
    this[property].style.MozOpacity = value /10;
    this[property].style.opacity = value /10;
//    if(this[property].style.opacity == 0) this[property].style.display = 'none';
  },
  setOpcUsedTimer : function (property, start, end, object)
  {
    var obj = (object ? object : this);
    if (start != end)
    {
      var i = start + (start > end ? -1 : 1);
      setTimeout(function () {obj.setOpcUsedTimer(property, i, end, obj);}, this.interval);
      obj.setOpacity(property, i);
    }
  }
};