CSSActif - Code à CC "Effet rollover sur une image"

Développement du code http://www.css-actif.com/t432-effet-rollover-sur-une-image

by espeon

HTML

<div class="center">
    <img id="mon-image" src="http://theme3.cssactif.com/logo.png" alt="CSSActif"
    />
    <img class="mes-images" src="http://theme3.cssactif.com/logo.png" alt="CSSActif"
    />
    <img class="mes-images" src="http://theme3.cssactif.com/logo.png" alt="CSSActif"
    />
    <img id="mon-special" src="http://theme3.cssactif.com/logo.png" alt="CSSActif"
    />
</div>

CSS

.center {
    width: 820px;
    margin: auto;
    text-align: center;
}
img {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}
#mon-image {
    border: 1px red solid;
}
.mes-images {
    border: 1px blue solid;
}
#mon-special {
    border: 1px orange solid;
}

JavaScript

(function ($) {
    $.fn.rollover = function (options) {
        var defaults = {
            imgNormal: $(this).attr('src'),       // Image par défaut
            imgSurvol: $(this).attr('src'),       // Image au survol
            imgClick: $(this).attr('src'),        // Image au click
            imgClickSurvol: $(this).attr('src'),  // Image au survol de imgClick (special)
            duration: 0,                          // Transtion (0 = pas de transition
            trigger: ''
        };

        options = $.extend(defaults, options);

        // Effet de changement d'image
        var chgImage = function (imgSrc, el) {
            $(el).fadeOut(options.duration, function () {
                $(el).attr('src', imgSrc).fadeIn(options.duration);
            });
        };

        // Changement au clic
        var rollClick = function (el) {
            if ($(el).attr('src') == options.imgClick || (options.trigger=='special' && $(el).attr('src') == options.imgClickSurvol)) {
                // Image de base
                chgImage(options.imgNormal, el);

                if (options.trigger == 'special') {
                    if (options.imgClickSurvol != options.imgNormal) {
                        // S'il y a une image au survol de imgClick, on désactive son binding
                        $(el).unbind('.superSpecial');
                    }

                    // Dans le cas hover+click on (ré)active le binding sur l'image de base
                    $(el).bind({
                        'mouseenter.special': function (e) {
                            chgImage(options.imgSurvol, this);
                        },
                        'mouseleave.special': function (e) {
                            chgImage(options.imgNormal, this);
                        }
                    });
                }
            } else {
                // Image au clic
                chgImage(options.imgClick, el);
                
                if (options.trigger...