画像なしで角丸の吹き出しを表示する JavaScript

吹き出しを表示できる JavaScript を書いたりしたのだけど、画像を使って吹き出しを作っているのでちょっと面倒な気がしてきた。
画像を使用した吹き出しその1、その2。

そこで、画像を使わないで吹き出しを作れるようにしてみた。吹き出しのデザインは角丸の下に矢印（？）を付けるという感じ。まずはサンプルを。

訪問ありがとうございます。来年もよろしくお願いします。よいお年を。

吹き出しの設定

X軸: Y軸:
色:
横幅: px

吹き出しをダブルクリックすると吹き出しが消えます。

角丸の部分があまり丸でもないような感じもしますが、その辺はあまり気にせずに。下の矢印も同じようなやり方で三角形を作っています。こういうやり方はちょっと強引な感じでいいのか少し不安がありますが。

ソースと使い方です。
追記（2006/12/29）ソースを少し整理。

function makeBalloon(elm, text, color, width, x, y, opacity) {
  color = color || "#fc0";
  width = width || 120;
  x ? x = +x : x = 5;
  y ? y = +y : y = 5;
  opacity = opacity || 75;
  var name = "balloonBox";
  // elm の左上のX値、Y値を取得
  var oLeft = 0;
  var oTop = 0;
  var node = elm;
  while (node) {
    oLeft += node.offsetLeft;
    oTop += node.offsetTop;
    node = node.offsetParent;
  }
  // 吹き出しボックス
  if (document.getElementById(name)) {
    var b = document.getElementById(name);
    b.parentNode.removeChild(b);
  }
  var rBox = document.createElement("div");
  rStyle = rBox.style;
  rStyle.textAlign = "center";
  rStyle.width = width + "px";
  rStyle.position = "absolute";
  rStyle.left = (oLeft + x) + "px";
  rStyle.top = (oTop + y) + "px";
  rStyle.opacity = opacity / 100;
  rStyle.MozOpacity = opacity / 100;
  rStyle.KhtmlOpacity = opacity / 100;
  rStyle.filter = "alpha(opacity=" + opacity + ")";
  rBox.ondblclick = function() {this.parentNode.removeChild(this);}
  rBox.setAttribute("id", name);

  rBox.appendChild(createR(4, "top")); // 角丸上部
  rBox.appendChild(createText(text)); // テキストボックス
  rBox.appendChild(createR(4, "bottom")); // 角丸下部
  rBox.appendChild(createArrow("left")); // 矢印
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(rBox);

  
  function createR (number, position) {
    var n = number = +number;
    var box = document.createElement("div");
    // 角丸生成
    for (var i = 0; i < n; i++) {
      var r = document.createElement("div");
      var style = r.style;
      if (position == "top") style.margin = "0px " + number + "px";
      if (position == "bottom") style.margin = "0px " + (i + 1) + "px";
      style.overflow = "hidden";
      style.backgroundColor = color;
      style.height = "1px";
      box.appendChild(r);
      number -= 1;
    }
    return box;
  }

  function createText (text) {
    var tBox = document.createElement("div");
    tBox.appendChild(document.createTextNode(text));
    var tStyle = tBox.style;
    tStyle.color = "#000";
    tStyle.backgroundColor = color;
    tStyle.padding = "5px";
    return tBox;
  }
  
  function createArrow (margin) {
    var arrow = document.createElement("div");
    arrow.style.width = "50px";
    arrow.style.margin = "0 auto";
    // 矢印生成
    var n = 30;
    for (var i = 0; i < 20; i++) {
      var r = document.createElement("div");
      var style = r.style;
      style.overflow = "hidden";
      style.backgroundColor = color;
      style.height = "1px";
      style.marginTop = "0px";
      style.marginBottom = "0px";
      if (margin == "left") style.marginLeft = n + "px";
      if (margin == "right") style.marginRight = n + "px";
      arrow.appendChild(r);
      n += 1;
    }
    return arrow;
  }
}

var elm = document.getElementById("sample");
var text = "よいお年を。";
var color = "#FFCC00";
var width = 150;
var x = 10;
var y = 10;
var opacity = 70;
makeBalloon(elm, text, color, width, x, y, opacity);

引数の color 以降は省略可能です。省略した場合は
color（色）#FFCC00、
width（横幅）120px、
x（x軸）、y（y軸）各 5px、
opacity（透明度）75
となっています。x、y は指定したエレメントの左上からの距離となります。

Comments

お名前:

メールアドレス:

ホームページアドレス:

コメント: