Question

How I can achieve image changes depending on the mouse position: left, top-left , top , top-right, right , bottom-right, bottom, bottom-left and on click.

Here is a example of what I am trying to do:

http://z6creation.net/fr/accueil

I have tried playing around with a similar topic I found on Stack Overflow but I can’t seem to get left, right, top and bottom to work properly:

changing a image with mouse positions

Here’s the code I have been using

jsfiddle

Answer 1

You can see how he does this by looking at his js files. He has a js file called site.faces.js

$.extend(Site, {
    Faces: {

        /* Attributes */

        center: {
            'left': 0,
            'top': 0
        },
        config: {
            'persons': ['eric', 'fabian', 'lievin', 'nicolas', 'pascale', 'fred'],
            'nbpositions': 8 
        },
        currentImage: null,


        /* Methods */

        angle: function (cursor) {
            var angle =  Math.atan2(0-cursor.y,0-cursor.x)*(180 / Math.PI);
            if(angle < 0) { angle += 360;}
            return angle;
        },


        distance: function(cursor) { 
            return Math.sqrt( Math.pow((0 - cursor.y),2) + Math.pow((0 - cursor.x),2) ); 
        },


        setCenterFace: function() {
            Site.Faces.center = $("#face").offset();
            if (parseInt($('#face').css('padding-top'))==0) {
                Site.Faces.center.left += 720/2;
                Site.Faces.center.top += 480/2;
            } else {
                Site.Faces.center.left += $("#face").width()/2;
                Site.Faces.center.top += parseInt($('#face').css('padding-top'))/2;
            }
        },


        init: function(config) {
            if (typeof config!='undefined') {
                $.extend(this.config, config);
            }
            if (typeof this.config.person=='undefined') {
                 this.config.person = this.config.persons[Math.floor(Math.random()*this.config.persons.length)];
            }
            /* 
                To force a face, use this...
                this.config['person'] = 'fabian';
            */
            $('#face').addClass('face-'+this.config['person']);
            if ($('html').hasClass('touch')) { 
                $('#face').css({
                    'background-image': 'url('+Shin.href(';img/site/faces/'+this.config['person']+'.jpg')+')'
                });
                $('.face-'+this.config['person']).fadeIn();
                $(window).resize(function(){
                    var bgPositionX = '0px';
                    if ($('#face').css('padding-top')!='0px') {
                        bgPositionX = "center";
                    }
                    $('#face').css('background-position', bgPositionX+' 0px');
                });
                $(window).resize();
            } else {
                $(window).resize(function(){
                    Site.Faces.setCenterFace();
                    Site.Faces.showImage(9);
                });
                Site.Faces.preloadImage(Shin.href(';img/site/faces/'+this.config['person']+'_mixed.jpg'), function() {
                    $(window).resize();
                    var offset = null;
                    var cursor = {
                        x: 0,
                        y: 0
                    };
                    $('body').mousemove(function(e) {
                        cursor.x = (e.pageX - Site.Faces.center.left);
                        cursor.y = (e.pageY - Site.Faces.center.top);
                        Site.Faces.manageImage(cursor, 'mousemove');
                    });
                    $('a, #face').bind('mousedown',function() {
                        Site.Faces.showImage(10)
                    });
                });
            }
        },


        manageImage: function(cursor, event) {
            if (event == 'mousemove') {
                var centerDistance = 100
                if ($('#face').css('padding-top')!='0px') { 
                    centerDistance = 50
                }
                if (this.distance(cursor)<centerDistance) { 
                    if(Site.Faces.currentImage != 9 && Site.Faces.currentImage != 10) {
                        Site.Faces.showImage(9);
                    }
                } else {
                    var angleByPosition = 360/this.config['nbpositions'];
                    var numImage = Math.ceil(( this.angle(cursor) + (angleByPosition/2))/angleByPosition);
                    numImage = (numImage>this.config['nbpositions'])?1:numImage;
                    if (Site.Faces.currentImage != numImage) {
                        Site.Faces.showImage(numImage);                     
                    }
                }
            }
        },


        preloadImage: function(src, callback) {
            var img = new Image();
            img.src = src;
            img.onload = function () {
                $('#face').css('background-image','url('+src+')');
                $('.face-'+Site.Faces.config['person']).fadeIn();
                if (typeof callback=="function") callback();
            };
        },


        showImage: function(num) {
            Site.Faces.currentImage = num;
            var height = (480*(10-num));
            var bgPositionX = '0px';
            if ($('#face').css('padding-top')!='0px') {
                height = (200*(10-num));
                bgPositionX = "center";
            }
            $('#face').css({
                backgroundPosition: bgPositionX+' -'+height+'px'
            });
        }

    }
});