イメージマップのロールオーバー

キーボードフォーカスにも対応。HTMLは普通にマークアップすればOK。


JavaScript


window.jQuery && (function($) {
    $(function() {
        $("area").each(function () {
            var $target = $(this),
                $img = $target.closest("li").find("img"),
                imgSrc = $img.attr("src");

            $img.data("normal-src", imgSrc);
            $img.data("hover-src", imgSrc.replace(/(\.[a-zA-Z0-9]+)$/, "_o$1"));
            $("<img />").attr("src", $img.data("hover-src"));

            $target.bind("mouseover focus", function () {
                $img.attr("src", $img.data("hover-src"));
            });
            $target.bind("mouseout blur", function () {
                $img.attr("src", $img.data("normal-src"));
            });
        });
    });
}(jQuery));