クリッカブルマップでロールオーバー

クリッカブルマップの画像をエリア設定している部分だけロールオーバー表示したいな。。。なんて思わなくてもいいことをやってしまったので思いで程度にメモ。但し、四角形のエリア限定。
[例]　不動産・住宅　物件検索 – BIGLOBE住まい

ぶっちゃけクリッカブルマップをロールオーバーなんて馬鹿だと思うので、普通はCSSのpositionプロパティでAタグなんかをブロック表示で設置すればいいと思います。
だけど、どうしてもマップじゃないと駄目な理由がある場合は参考にしてください。jQueryを駆使してかなり強引にやってるので誰得な感じですけど。

まずは通常時とロールオーバー時の2枚の画像を用意します。今回例として使うのは下の二つ。ロールオーバー時の画像ファイル名は拡張子の前に_overを付け加えたものとします。

で、次にクリッカブルマップを設置します。こんな感じで、idを振ったdivでimgとmapを囲います。（それぞれのpaddingやmarginはスクリプトで考慮していないので気をつけてください）

<h1>クリッカブルマップでロールオーバー</h1>
<div>
    <img src="map.jpg" width="170" height="160" alt="ボタンマップ" />




</div>

したらば、ムチャな感じのJavaScriptを組み込みます。当然jQuery使ってるので、事前にライブラリを読み込むようにしてください。

$(function(){
    $.fn.extend({
        mapRollOver: function(){
            var self = this;
            var map = $('map', this);
            var image = $('img[usemap="#' + map.attr('name') + '"]');
            $(this)
                .css('position', 'relative')
                .find('area').mouseover(function(){
                    $('.over').remove();
                    var coords = $(this).attr('coords').split(',');
                    var overSrc = image.attr('src').replace(/(\.gif|\.jpg|\.png)$/, "_over"+"$1");
                    var overHref = $(this).attr('href');
                    $('<a />')
                        .css({
                            display: 'block',
                            position: 'absolute',
                            left: coords[0] + 'px',
                            top:   coords[1] + 'px',
                            width: (coords[2] - 0 - coords[0]) + 'px',
                            height: (coords[3] - 0 - coords[1]) + 'px',
                            background: 'url(' + overSrc + ') no-repeat -' +  coords[0] + 'px -' +  coords[1] + 'px'
                        })
                        .attr('href', overHref)
                        .addClass('over')
                        .mouseout(function(){
                            $(this).remove();
                        })
                        .appendTo(self);
                });
        }
    });

    $('#RolloverMap').mapRollOver();
});

はい、完成です。実際の動作サンプルは下記リンクへどうぞ。

サンプルページ

仕組みとしては、クリッカブルマップ上のareaで定義された範囲にカーソルを載せると、そのareaがhover状態になるので、mouseoverイベントが発生します。その際にareaのリンク先をコピーしたブロック表示のaタグを生成し、背景にロールオーバー用の画像を設定し、マップ上に乗っけています。カーソルが外れた際は自滅するようになっています。

一応動いているんですが、すばやく動くと時々自滅処理に失敗しますね。うーむ、JSの宿命なのかな。
というわけで、以上。