Swap multiple images on mousemove

Question

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:

    <article>
      <figure data-imageList="image2.jpg,image3.jpg,image4.jpg">
        <img data-src="main-image.jpg" src="main-image.jpg">
      </figure>
    </article>

As you can see at html, the images src will be change from the data-imageList. When user mouseout from the article, the main-image.jpg will appear again. This will the default image. The function should be trigger when user only move his mouse from left to right on the current article. The other list items shouldn't be affected from the mousemove. Maybe, i should create a unique id or use the "each function" to do that. I couldn't solve that problem either anyway...

Could someone help me to solve that problem. I am really bad at javascript.

Thank you!

Answer 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

Answer 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;
}

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