> >

概要

私のように HaloScan のテンプレートをカスタマイズしていると新機能になかなか気付けません。そこで私は幾つか持っている HaloScan アカウントのうち一つはデフォルトのまま使用しています。そのアカウントのコメントを見て最近気付いたのですが、HaloScan コメントに画像を付けることができるようになりました。

百聞は一見にしかずなのでこのエントリのコメントに画像を一つ付けておきます。

直接画像がコメントに表示されるのではありません。アップロードした画像のリンクを a 要素を使って付けると、そのリンクの上にマウスを持ってくるとサムネイルがポップアプされるという仕組みになっています。アップロード先は ThumbSnap.com というフリーのイメージホスティングサービスです。ポップアップされるだけでなく実際にそのリンクを辿るとサムネイルではなく原寸大(?)の画像を表示できます。

アップロードできる画像には制限があります。FAQ のページにも書いてありますが、現在のところ次のような画像をアップロードできます。

• ファイルサイズが 2MB 以内。
• ファイルの拡張子が ".jpg", ".jpeg", ".gif", ".png" の何れかで、その拡張子通りの画像フォーマット。

アップロードできる画像の数には制限はありません。またアカウントを取得したり何らかの支払いをする必要は全くありません。

カスタムテンプレートへの反映

デフォルトのテンプレートでなくともこの機能は使用できます。次のコードをカスタムテンプレートに入れてください。

画像アップロードフォームへのリンク

<_a href="http://www.thumbsnap.com/?l=n" onclick="window.open('http://www.thumbsnap.com/?l=n','imgup','width=550,height=420,resizable=yes,scrollbars=yes'); return false;" title="Attach Image" target="_blank"><img src="/images/image_link.gif" style="vertical-align:middle;" height="16" width="16" alt="Attach Image" border="0" /></a>

画像ポップアップ

<div id="helper" style="display: none;position:absolute;background:#d7ecff;border:1px solid #97bde1;width:140px;padding:10px;text-align: center;font-size: 10px; font-weight: bold; font-family: Verdana, Tahoma, Arial, sans-serif;">&nbsp;</div>
<script type="text/javascript"><!--
function helper(hid,text,e)
{
    var posx    = 0;
    var posy    = 0;
    if(!e) var e    = window.event;
    if(e.pageX || e.pageY)
    {
        posx    = e.pageX;
        posy    = e.pageY;
    }
    else if(e.clientX || e.clientY)
    {
        posx = e.clientX + document.documentElement.scrollLeft;
        posy = e.clientY + document.documentElement.scrollTop;
    }
    var state     = document.getElementById(hid).style.display;
    if(document.getElementById)
    {
        if (state=="none")
        {  
            state = "inline";
        }
        else
        {
            state = "none";
        }
        document.getElementById(hid).innerHTML=text;
        document.getElementById(hid).style.top=(posy - 10) + "px";
        document.getElementById(hid).style.left=(posx + 20) + "px";
        document.getElementById(hid).style.display=state;
    }
}
// --></script>

body 要素の一番後ろ(</body> の直前)辺りに入れるのがよいでしょう。{HSCommentStart} から {HSCommentEnd} など繰り返し部分の間に入れてはいけません。

どちらもオリジナルから若干変更してあります。変更の主旨は次のとおりです。

• JavaScript が無効または利用できないブラウザでもアップロードフォームを表示できるように。
• script 要素を理解しない携帯電話のブラウザのようなものでも JavaScript コードが露出しないように。