マウスが上に乗ると特定の画像が表示されるものを書いてみた

前回ブログパーツタグ直下にdivタグを挿入して、
そのついでにimgも挿入するということをやりましたが、
今回はそのimgにマウスが乗った時(hover)にアクションを起こすという事をやります。

具体的には、あらかじめ非表示にしていた画像を、
乗る乗らないの判定で表示するというアクションです。

JS
$(document).ready(function () {
    //非表示画像をあらかじめ埋め込む
    $("body").after('<img src="http://hoge.com/bp/img/bp.jpg" id="jackimg" />');
    $("#jackimg").css({
        "display": "none",
        "width": "100%",
        "height": "100%",
        "top": "0px",
        "left": "0px",
        "position": "fixed"});
        //"position": "absolute"});

    //bpにマウスが乗ったときの処理
    $("img.hogebp").hover(
        function() {
            //乗ったらフェードイン！
            $("#jackimg").fadeIn("slow");
        },
        function() {
            //離れたらフェードアウト！
            $("#jackimg").fadeOut("slow");
        }); 
});

ちなみにこれを実行すると、マウスが乗った時に全画面に画像が出てくるので
軽く全画面ジャックする事ができます。
応用してフラッシュで全画面をジャックすることもできますね！

ブログパーツのライブラリで、簡単にフラッシュで全画面ジャック
するということを1行でやっておりましたが、
やっと自力でここまでたどり着けました。