ドット絵にマウスオーバーでパレットを表示するようにしてみた

昨日の記事の使用例として、ここのギャラリーでドット絵にマウスオーバーするとパレットを表示するようにしてみました。

サンプル

実際に動かすとこんな感じ。 ↓マウスをのせてみよう！ ※やっぱりIEでは動きません。

コード

$(function() {
  $('img').each(function(_, img) {
    var $img = $(img);
    PixelUtil.load($img.attr('src'), function(imgInfo) {
      var palette = imgInfo.palette;
      var $tip    = $("<div class='pixelTip'></div>");
      var $table  = $("<table></table>");
      for (var y = 0; y < 16; y++) {
        var $tr = $("<tr></tr>");
        for (var x = 0; x < 16; x++) {
          var offset = x + y * 16;
          var color = (offset >= palette.length) ? "#000" : "#" + palette[offset];
          $("<td></td>").css({ "background-color":color }).appendTo($tr);
        }
        $table.append($tr);
      }
      var pos = $img.offset();
      $tip
        .append("<span class='width'>"  + imgInfo.width      + "</span>")
        .append("<span class='height'>" + imgInfo.height     + "</span>")
        .append("<span class='size'>"   + imgInfo.fileSize   + "</span>")
        .append("<span class='depth'>"  + imgInfo.colorDepth + "</span>")
        .append($table).css({ position:"absolute", "z-index":10 })
        .css({ "left":pos.left+"px", "top":pos.top+imgInfo.height+"px"}).hide()
        .appendTo(document.body);
      $img.hover(function() { $tip.show(); }, function() { $tip.hide(); } );
    });
  });
});