Swap Multiple Images On Mousemove

What i would like to do is to show the products other versions of images on mousemove from left to right. Here's the simple html example:

Solution 1:

Just made a Fiddle with some dummy-images as data-attribute and following jQuery:

    $("img").mousemove(function (event) {
    var xPos = event.pageX;
    $images = $("figure").data("imageList");
    var array = $images.split(',');
    if (xPos > 40) {
        $("img").attr("src", array[0]);
    }
    if (xPos > 65) {
        $("img").attr("src", array[1]);
    }
    if (xPos > 85) {
        $("img").attr("src", array[2]);
    }

});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});

For demonstration just small images. Could be calculated properly according to the actual image size when the images should be swapped, but for demo just hardcoded the values.

For reference: http://api.jquery.com/data/

Update: As further requested the same example for responsive: Change responsive image

$(".imageHolder").mousemove(function (event) {
    var xPos = event.pageX,
        imgPos = $(".imageHolder").offset().left,
        imgWidth = $(".imageHolder").width();
    var change1 = imgPos,
        change2 = imgPos + imgWidth / 3,
        change3 = imgPos + 2 * imgWidth / 3;
    $images = $("figure").data("imageList");

    var array = $images.split(',');
    if (xPos > change1) {
        $("img").attr("src", array[0]);
    }
    if (xPos > change2) {
        $("img").attr("src", array[1]);
    }
    if (xPos > change3) {
        $("img").attr("src", array[2]);
    }


});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});  

CSS:

figure {
    width:100%;
    max-width:200px;
}
img {
    position:relative;
    width:100%;
}

I also added class imageHolder to the image (not necessary but too used to work with classes instead of just applying to elements) and left the console log messages in the Fiddle so it's easier to check the calculated width and positions. Another minor adjustment in provided example is to change the name of the data-attribute from data-imageList to data-image-list, also of just being used to it. Reason is the naming convention that every hyphened data- attribute will be retrieved minus the hyphen and camelcased (the first letter after the hyphen), so data-image-list will be retrieved as $.data("imageList"). Additional reference for this here: W3C - The "data-"-attribute If the name of the used data-attribute is already camelCased, then it's retrievable lowercased: data-imageList="value1, value2, valu3" -> $.data("imagelist"). Though not mentioned in the jQuery-api, description e.g. here: http://bugs.jquery.com/ticket/9066

Solution 2:

You can use a div and place and img control inside it. Now with onmouseover and e.PageX find the change in width and the width of div and then using if-else change the src attribute of img. Finally using onmouseleave change the src of img to default.

var prevX = 0;
$('div').mousemove(function(e) {
 var direc = (prevX >= e.pageX ? "left" : "right");
    if(direc==="right"){
        if(e.pageX>100){
        $("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+2");
        }
        else
        {
        $("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+3");
        }
    }
    prevX = e.pageX;
});

$( 'div' ).mouseleave(function() {
$("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+1");
});

div
{
    height:300px;
    width:200px;
    border: 1px solid red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><div><imgid="img"src="http://dummyimage.com/200x300/000/fff.png&text=Image+1"></div>

Share