ガーゴイル杯 お疲れ様でした^^

対戦記が石版の途中から延々とたまっているフィラです。
ガーゴ杯お疲れ様でした^^
一勝もできませんでしたが、ガーゴイルをあんなに使ったのは初めてです^^
ヨシさんの前でガーゴをディスコードできなかったのが心残り。。。(ディスコードを入れるのはレギュレーション違反です。入れてませんよ～)

ところで、Kasupiさん(Cept部id:Kasupi)さんが、地属性校章をぽちっと押すと、ウィンドウをポップアップさせて学生証を表示する、というソースを紹介されていたので、それに触発され、「マウスを校章に重ねるだけで、表示してくれることはできないかな。。。」ということに挑戦してみました。
今回はCSSを使って実現しております。

* 注) SAllyさんがhatenaを退会されたのに伴い、学生証はすべて削除されましたので、ポップアップは動きません。残念

学生証ポップアップサンプル

地属性高校学生証

と、こんな感じにポップアップできるようでした^^
※ 注: SAllyさん情報:firefoxでは動きません＞＜　SAllyさんありがとうございます。

■設定方法

手順１．「設定」→「詳細設定」→スタイルシート のエリアにCSSソースを設定

まず、自分のページの詳細設定を開いて、CSSに以下の内容を設定します。(( 注意：本文と関係ないですが、詳細設定で、「見出しを2段で表示する」「見出しを1段で表示する」の部分をいじくると、いままで頂いた はてなスターが ごっそり消えることがあるそうです。これは悲劇。いじくらないほうがよさそうな設定です。 ＞＜ ))

.popup img.pop {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img.pop{
top:-260px;
left:0px;
}

最後のtop, left で どこに表示するか位置を指定します。想定された位置に正しく出ない場合はここをいじくってください。
top に負の数を指定すると上に、正の数だと下に出ます。leftに負の数で左、正の数で右にでます。あべこべな感じですね。

手順２．「設定」→「詳細設定」→「ページのフッタ」に画像を添付

そして、同じく詳細設定の、サイドバー(ページのフッタ)あたりにこのように記載してください。
サンプルは、Kasupiさんの学生証を使ってます。
自分は、勝てなかったので。。。他人の学生証を流用^^;;; Kasupiさんすみません。

↓IMG の SRCの中は、ご自分の学生証を入れてくださいね^^ これをそのまま張るとKasupiさんの学生証が出てしまいます。

↓普通のHTMLと違い、タグの中で改行を入れると表示がおかしくなることがあるので注意。1タグ1行推奨。

<div class="popup">
<A TARGET="_BLANK" HREF="http://f.hatena.ne.jp/images/fotolife/S/SAlly/20090704/20090704233850.gif" NAME="ガーゴイル杯">
<img class="pop" width="400" height="251" alt="地属性高校学生証サンプル" src="http://f.hatena.ne.jp/images/fotolife/S/SAlly/20090704/20090704233850.gif" />
<img width="64" height="64" alt="地属性高校校章" src="http://img.f.hatena.ne.jp/images/fotolife/K/Kasupi/20090704/20090704163937_120.jpg">
</a>
</div>

参考にしたページ: http://garage.mods.jp/ex/css-popup/#
　↑ありがとうございます！

ちなみにIE6でしかテストしてません>< お使いのブラウザで動かなかったらごめんなさい。