巨大画像画像ファイルのCSS Spriteをフォントとして利用

原文

　ＳＭマニアから見れば、この事件にＳＭ性は感じられないという。だが一般（ノーマルな性的趣味）の人からすると、どちらも変質者で同じような気もするが……。「違います。事件の犯人は変質者。ＳＭマニアは変態。ＳＭマニアは自分が変態であることを認知しているし、立場も分かっていれば理性もある。日常生活においては全く普通で、性欲の部分だけが変態なんです。」（Ｇ氏）つまり変質者は理性がなくなるから犯罪にまで及んでしまうということだ。通り魔だけじゃなくて痴漢なども変質者のたぐいになるらしい。なおＧ氏によるとＳＭマニアに対して「変態」と言うぶんには何も問題ないが……

↓

CSS Spriteによるフォントを適用

ダミーテキスト。ボタンクリックイベントにてtextarea内の文字列を元にここにspanタグが生成され、後掲のCSSスプライトをspan毎にずらして、人間が読めるようにする

code

    <script type="text/javascript">
    // <[!CDATA[
    $(function() {
      copy();
      change();
    });
    function copy() {
      $('#honmon').html($('textarea[name=inputbox]').val());
    }
    function change() {
      var str = $('#honmon').html();
      var newstr = '';
      var h = 16;
      var w = 16;
      for (var i = 0; i < str.length; i++ ){
        var code = str.charCodeAt(i);
        var char = String.fromCharCode(code);
        var ku  = parseInt( code / 256 );
        var ten = code % 256;
        var html = '<span class="moji" title="' + char
                 + '" style="height: '+ h + 'px; width: '
                 + w + 'px; background-position: ' 
                 + ten * -w + 'px ' + ku * -h + 'px;"></span>'
        newstr = newstr + html;
      }
      $('#honmon').html(newstr);
    }
    // ]]>
    </script>

Splite画像