2006年05月18日

リンク先をサムネイル表示する JavaScript

リンク先のサムネイルを表示させる JavaScript のソースを公開してみます(もっとスッキリ書ける気もしますが取り合えず)。どんなものかはこちらを参照

興味がある方はご自由にご利用ください。
ただし不具合等あるかもしれないので自己責任でお願いします。
Seesaa のブログというか、自分のブログでしか確認していないので、他のブログで動作するかはわかりません。適当に変更してみてください。


function PopUpThumbnail() {
  var max = 5;
  var n = 0;
  var Links = {};
  var myhost = location.hostname;
  var main = document.getElementById('content');
  var a = main.getElementsByTagName('a');
  var len = a.length;

  for (var i = 0; i < len; i++) {
    if (!a[i].firstChild) continue;
    var affiliate = a[i].getAttribute('class') || a[i].getAttribute('className');
    if (affiliate == "affiliate-link") continue;
    var link = a[i].href;
    var tag = a[i].firstChild.tagName;
    if (tag) {
      if (tag.match(/IMG/)) continue;
    }

    if (!link.match(myhost) && link.match(/^http/)) {
      if (Links[link]) {
        createPopUp(a[i]);
      } else {
        if (n >= max) continue;
        Links[link] = true;
        createPopUp(a[i]);
        n++;
      }
    }
  }

  function createPopUp(a) {
    var api = "http://img.simpleapi.net/small/";
    var img = document.createElement('img');
    img.src = api + link;
    var style = img.style;
    style.position = 'absolute';
    style.width = '128px';
    style.height = '128px';
    style.margin = '-10px 0 0 5px';
    style.display = 'none';
    a.appendChild(img);
    a.onmouseover = function() {
      this.lastChild.style.display = 'inline';
    }
    a.onmouseout = function() {
      if (this.lastChild.tagName.match(/IMG/)) {
        this.lastChild.style.display = 'none';
      }
    }
  }
}

window.onload = PopUpThumbnail;

自分のサイト内と Seesaa の自動でキーワードにアフィリエイトが付くリンクは対象外です。画像にリンクが付いている場合も外しています。
それとサムネイルを作成するのは5つだけにしています。



posted by knit at 01:50 | Comment(0) | TrackBack(0) | JavaScript
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバック