最後にプログラムを更新したのが、2010年の年末頃だったので、半年近く放置状態の画像掲示板dtnでしたが、途中で新しい機能を一つ追加しておりました。

どんな機能かといいますと、書き込み内にレスアンカーがあった場合に、自動的に該当記事までの内部リンクを作成するといったものでした。このような感じで、PHPに一行足しただけでしたが。

$memo = preg_replace('/>>([0-9]+)/','<a href="#\\1">\\0</a>',$memo);

他掲示板でもあるように、内部リンク先の投稿をJavaScriptでポップアップさせたりしてみたかったのですが、これがなかなかうまくいかず、あまり時間もなかったので単に内部リンクを張るだけで済ましておりました。

今回はこれをしっかりポップアップリンクをするように組み上げてみました。

初めはjQueryのお世話にならないよう、単純にJavaScriptを書いていたのですが、IEではうまくいっても、Firefoxや他で動作が失敗してたりで面倒になってしまい、やはりjQueryでやることとしました。

結果、完成したのがこんな感じです。

アンカーリンクでポップアップが表示されました

基本的な考え方はJavaScriptでやるのと同じで大丈夫です。 まず、下記のようにレスアンカーを表示させる為のdivをhtmlに用意しておきます。

<div id="ID"></div>

次に、レスアンカー部分にマウスがのったらポップアップさせる肝心のjQueryコードを書くのですが、その前にアンカーリンク自体にも仕掛けをしておきます。どの書き込みをポップアップさせるかを判別する必要があるからです。

そこで、手っ取り早くする為、a link のname属性部分に、
表示させたいdivのidを仕込んでおきました

<a href="#1" class="onMouse" name="d1">

最後はjQueryのコードとなります。

$(function(){
 $("#ID").css({
  opacity:"0.9",
  position:"absolute",
  display:"none"
 });
 $("a.onMouse").mouseover(function(){
  var popupID = $(this).attr("name");
  $("#ID").html($("#" + popupID).clone());
  $("#ID").fadeIn("fast");
 }).mouseout(function(){
  $("#ID").fadeOut("fast");
 }).mousemove(function(e){
  $("#ID").css({
   "top":e.pageY+10+"px",
   "left":e.pageX+10+"px"
  });
 });
});

流れとしては、レスアンカーリンクにマウスがのった時に、name属性の値を取得して、そのボックスデータをからの<div>#IDにコピーする。オマケでフェードイン、フェードアウトの設定を付けてみた感じです。

jQueryだとブラウザの差異もあまり気にしなくていいのでjQueryさまさまでした。

こんなことやる前に、ディレクトリの登録審査やら、猫ねこサーチエンジンのXHTML化やら、やること山ほどあるのですが、これがさっぱり進まず。ご迷惑お掛けしてしまいます。

登録申請して下さった方々には大変申し訳ございませんが、今しばらくのお時間を頂きたく、宜しくお願い致します。

スポンサーリンク