ブログに地図を簡単に貼り付けられる JavaScript

以前、alpsclip tagger を利用して ALPSLAB の地図を貼り付ける方法を試してみたが、IE ではエラーが出てうまくいかなかった。最近は JavaScript も見直されてきているようなので、勉強も兼ねて自分で書いてみることに。

alpsclip tagger との違いは

• 地図画像のみ表示（alpsclip tagger では地図画像と住所、住所（テキスト）のみ、地図画像のみと表示を複数選択可能）
• <span class="adr">住所</span>と書くと地図画像に置き換わる（alpsclip tagger は<alpsclip>住所</alpsclip>など)
• 文字コードが euc-jp 以外のブログでも使える（はず？）

などがあります。比べるのも恥ずかしいですが。

WindowsXP の IE6 と Firefox1.5 、Opera8.53 では動作しています。それ以外は確認していないのでわかりません。（使用例）

おかしな点などありましたら、ご指摘頂けるとありがたいです。

function alpsclip() {
  var linkbase   = 'http://clip.alpslab.jp/bin/rd?';
  var imgbase = 'http://clip.alpslab.jp/bin/map?';
  var code = 'UTF-8';
  var elems = document.getElementsByTagName('span');
  var len = elems.length;
  for (var i = 0; i < len; i++) {
    var attr = elems[i].getAttribute('class') || elems[i].getAttribute('className');
    if (attr == 'adr') {
      var adr = elems[i].firstChild.nodeValue;
      var enc_adr = encodeURI(adr);
      
      var a = document.createElement('a');
      a.setAttribute('href', linkbase + 'ie=' + code + '&adr=' + enc_adr);
      a.setAttribute('target', '_blank');
      var img = document.createElement('img');
      img.setAttribute('src', imgbase + 'ie=' + code + '&adr=' + enc_adr);
      img.setAttribute('alt', adr);
      img.setAttribute('title', adr);
      a.appendChild(img);
      elems[i].removeChild(elems[i].firstChild);
      elems[i].appendChild(a);
    }
  }
}
    window.onload = alpsclip;