イメージボタンをさくっと作る。

命名規則に従って、イメージボタンをさくっと作る関数を書いてみた。

使い方

1.htmlにボタン化するaタグを書く。

• href属性にクリックした際の動作を記述しておく。

<!-- ボタンにするリンク -->
<a id="test"  href="javascript:buttonCicked('1');" />
<a id="test2" href="javascript:buttonCicked('2');" />

2.aタグのIDと画像IDを指定してボタン作成関数を呼び出す。

• 実行するとaタグが以下の画像から構成されるボタンになる。
  • 通常:「"./img/" + <画像ID> + ".gif"」
  • 押された:「"./img/" + <画像ID> + "_down.gif"」
  • マウスが乗った:「"./img/" + <画像ID> + "_over.gif"」
• 画像IDは省略できる。省略した場合、aタグのIDが使われる。

// ボタンを作成。
createButton("test");
createButton("test2", "test");

実装

// 命名規則に従ってボタンを作成する。
function createButton ( id, imgId ){
  imgId = imgId || id;
  var elm = document.getElementById(id);
  var img = document.createElement("img");
  img.src = "./img/" + imgId + ".gif";
  elm.appendChild( img );

  var down = function() {
      img.src = "./img/" + imgId + "_down.gif";
  }
  var none = function() {
      img.src = "./img/" + imgId + ".gif";
  }
  var over = function() {
      img.src = "./img/" + imgId + "_over.gif";
  }
  elm.onmousedown = down;
  elm.onmouseup = none;
  elm.onmouseout = none;
  elm.onmouseover = over;
}

サンプルはこちら