jQuery_RollCake.js

対象を img、または親(aタグなど)に指定可能なロールオーバー

by ethertank

HTML

<script>
$(function(){
    $("#nav_A a").jQuery_RollCake("fff");
    $("#nav_B li").jQuery_RollCake("fff");
    $("#nav_C img").jQuery_RollCake("fff");
});
</script>

<p>"最初のリストに対しては、aタグをプラグインのセレクタに使用しているのでfocusイベントでロールオーバーが動作します。２番目はあまり意味の無い例。３番目はimgに対して直接指定しています。クリック時の動作を伴わない単なるギミックなどの用途においては有効です。"</p>

<div id="nav_A">
<ul>
<li><a href="#"><img src="http://placehold.it/100/200/999fff.png" width="100" height="100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100/020/999.png" width="100" height="100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100/002/999.png" width="100" height="100" /></a></li>
</ul>
</div>

<div id="nav_B">
<ul>
<li><a href="#"><img src="http://placehold.it/100/200/999fff.png" width="100" height="100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100/020/999.png" width="100" height="100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100/002/999.png" width="100" height="100" /></a></li>
</ul>
</div>

<div id="nav_C">
<ul>
<li><img src="http://placehold.it/100/200/999fff.png" width="100" height="100" /></li>
<li><img src="http://placehold.it/100/020/999.png" width="100" height="100" /></li>
<li><img src="http://placehold.it/100/002/999.png" width="100" height="100" /></li>
</ul>
</div>

CSS

ul {
    display: block;
    clear: both;
}

li {
    display: block;
    float: left;
}

JavaScript

/*
 * jQuery_RollCake.js
 *
 * Varsion: 0.0.1
 * Date: 2012-02-23 20:30 
 * Copyright (c) 2012 ethertank.jp
 * Licensed under the MIT
 *
 * jQuery required (tested on 1.7.1)
 *
 */

(function($) {
    jQuery.fn.jQuery_RollCake = function(suffix) {
        var _suffix = suffix || "_on";

        $(this).each(function() {
            var $this = $(this),
                _i = $this[0].tagName.toUpperCase() == "IMG" ? $this : $this.find("img"),
                _off = _i.attr('src'),
                _on = _off.substring(0, _off.lastIndexOf(".")) + _suffix + _off.substring(_off.lastIndexOf("."), _off[_off.length]);

            $('<img>').attr('src', _on);

            $this.bind("mouseenter focus", function() {
                _i.not('[src*="' + _suffix + '."]').attr('src', _on);
            });

            $this.bind("mouseleave blur", function() {
                _i.attr('src', _off);
            });
        });
    };
})(jQuery);