0017

画像のマウスオーバー+カレントページ表示時に画像をONにするjQueryプラグインの自分メモ

画像のマウスオーバー+カレントページ表示時に画像をONにするjQueryプラグインの自分メモ

2011.1.17

画像のマウスオーバー+カレントページ表示時に画像をONにするjQueryプラグイン「jQuery rollover プラグイン」という記事を見つけました。こちらをベースに自分好みにカスタマイズしたものをメモしておきます。

プラグインをダウンロード

jQuery rollover プラグイン」からプラグインをダウンロードし、中身を若干カスタマイズします。

具体的には、ロールオーバー時の画像ファイル名を「hoge_over.png」というように、_overに変更しました。

/**
 * jQuery rollover plugin v1.0
 *
 * rollover the images that you hover and have current URL not to rollover.
 * http://www.miyagino.net/my/jquery-rollover/
 *
 * The rollover original source is as follows.
 * http://rewish.org/javascript/jquery_rollover
 *
 * This plugin is required jQuery version 1.3 or newer.
 *
 * This is under both MIT and GPL Lisences (same as jQuery).
 *
 * 2009 (c) Kazuo Kohchi , All Rights Reserved.
 */
(function($) {
    $.fn.rollover = function(opts) {
        var default_opts = { current : '', ro : '_over.' };
        var icache = new Array();

        opts = $.extend(default_opts, opts || {});

        var image_name = function(src) {
            var m = src.match(/(.+).([^.]+)$/);
            return m[1] + opts.ro + m[2];
        }

        var set_current = function(o) {
            if (o.length != 0) {
                var cimg = (o.children())[0];
                cimg.src = image_name(cimg.src);
            }
        }

        set_current(this.parent("a[href=" + opts.current + "]"));

        return this.not("[src*=" + opts.ro + "]").each(function(i) {
            var imgsrc = this.src;
            var imgsrc_ro = image_name(this.src);

            icache[i] = new Image();
            icache[i].src = imgsrc_ro;
            $(this).hover(
                function() { this.src = imgsrc_ro; },
                function() { this.src = imgsrc; }
            );
        });
    }
})(jQuery);

html





マウスオーバー+カレントページ画像ONサンプル







マウスオーバー+カレントページ画像ONサンプル

このページはhttps://0017.org/download/rollover/index.htmlです。


jQueryのscript部分

基本は「jQuery rollover プラグイン」で書かれている記述とほぼ同じですが、個人的に、開いているページのURLの絶対パスが好みだったので、1行追加しています。

サンプル

サンプルはこちらから

ダウンロード

サンプルダウンロード(51,912バイト)

参考