Change images on hover

Question

Change images on hover

I have a web page with x number of images, when I hover over an image, I want it to change every second with an image from the list.

Here's what I came up with: Fiddle

var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

But there are 2 problems with this,

I want to have all image links in html like: <img src="img1.png"><img src="img2.png">

etc contained in a div and make them visible or not (think what is the best way).
And I only need it when I hover the image.

Do you have any ideas? I don't need the code, just push in the right direction :)

To clarify: I have x number of images on a page, say 25, when I hover over one of 25 that should start changing, I cannot have 1 list with images (for example answers), because each image (from 25) will have a different list.

+3

javascript jquery html

Maarten peels June 11. 15 at 8:36

source to share

6 answers

JSFiddle

 var images = [];
    images[0] = "img1.png";
    images[1] = "img2.png";
    images[2] = "img3.png";
    images[3] = "img4.png";
    images[4] = "img5.png";
    images[5] = "img6.png";

    var interval;
    var i = 0;

    $(function () {
        $("img").mouseover(function () {
            interval = setInterval(fadeDivs, 1000);
        })
       .mouseout(function () {
                clearInterval(interval);

        });
    });

    function fadeDivs() {
        i = i < images.length ? i : 0;
        $('img').fadeOut(100, function() {
            $(this).attr('src', images[i]).fadeIn(100);
        });
        i++;
    }

+2

Siamak Ferdos June 11. 15 at 8:46

source to share

Try this: http://jsfiddle.net/6sbu79cy/1/

<div id="myimage">
<img src="http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg" />
</div>



 var images = [];
images[1] = "http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg";
images[2] = "http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg";


var i = 0;

$('#myimage').hover(function(){ fadeDivs() });


function fadeDivs() {
    setInterval(function(){
    i = i < images.length ? i : 0;
    console.log(i)    
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(500);
    })


    i++;
         }, 2000);
    setTimeout(function(){},1000);
}

0

Reena parekh June 11. '15 at 8:50

source to share

Create your images with index data = 0 and class id.

//call fadeDivs on mouse over 
$('.yourImages').hover(function(){
  setInterval(fadeDivs(this),100);  
});

//This will create unique fadeOut for all images which have mouse over action
//And separate index loadind
function fadeDivs(image) {   
   $(image).fadeOut(100, function(){
       var index = $(this).data('index');
       index  = index  < images.length ? index : 0;
       $(this).attr('src', images[index]).fadeIn(100);
       $(this).attr('data-index',index)
   });
}

0

Jegan June 11. 15 at 8:58 am

source to share

Here's a very simple solution with little change to your code.

I've added a hover receiver and a pre-spacing variable to the image so that it can be cleared when you are not hovering. Move a thing or two around.

https://jsfiddle.net/2nt2t09w/7/

var images = [];
images[0] = "http://placehold.it/100x100";
images[1] = "http://placehold.it/200x200";
images[2] = "http://placehold.it/300x300";
images[3] = "http://placehold.it/400x400";
images[4] = "http://placehold.it/500x500";
images[5] = "http://placehold.it/600x600";

var MyInterval;
var i = 0;
$('img').hover( function() {
    MyInterval = setInterval(fadeDivs, 1000);
    var $this = $(this);
    function fadeDivs() {
        i++;
        i = i < images.length ? i : 0;
        $this.fadeOut(100, function(){
            $(this).attr('src', images[i]).fadeIn(100);
        })
    }
}, function() {
    clearInterval(MyInterval);
});

img {
    height:100px;
    width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/100x100" />

Run code Hide result

0

Jamie barker June 11. 15 at 8:58 am

source to share

when i hover the image i want it to change every second the image from the list.

Assembling an array
Flicker-free image preloads.
Start the timer on mouseover
Replace the array by changing src
Stop timer on mouseout

I want all image links in html like: etc to be contained in a div and make it visible or not (think what's the best way)

This is fine, but it will be better to create images dynamically based on the size of your array, so you don't have to hard-code the tags and you can easily get rid of them when needed.

Here's a simple example ( Fiddle : http://jsfiddle.net/vz38Lzw7/1/ )

Excerpt

var x = [
    'http://lorempixel.com/200/200',
    'http://lorempixel.com/201/200',
    'http://lorempixel.com/200/201'
];
var index = 0, $img = $("#image1");

/*--- Pre-load images ---*/
var d = []; // create an array for holding dummy elements
for (var i = 0; i < x.length; i++) {
    d[i] = $("<img>"); // create an img and add to the array
    d[i].attr('src', x[i]).hide(); // add src to img and hide it
    $("body").append(d[i]); // add the img to body to start load
}

/*--- Bind events ---*/
$img.on("mouseover", function () {
    timer = setInterval(changeImages, 1000);
});

$img.on("mouseout", function () {
    clearInterval(timer);
});

/*--- Function to cycle the array ---*/
function changeImages() {
    index = (index + 1) % x.length;
    $img.fadeOut(250, function() {
        $(this).attr('src', x[index]).fadeIn(250);
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="image1" src='http://lorempixel.com/200/200' />

Run code Hide result

0

Abhitalks June 11. '15 at 9:37

source to share

insertusernamehere · Accepted Answer · 2015-06-11T08:56:51+0000

Hope this is what you are looking for. It adds all images to the container and starts infinite rotation on hover. The interval stops when you exit the item.

Html

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=X1" alt="">
</div>

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=Y1" alt="">
</div>

CSS

.wrapper {
    position: relative;
    height: 200px;
    margin-bottom: 250px;
}

.wrapper img {
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.wrapper img.active {
    opacity: 1;
}

JavaScript

var wrapper = $('.wrapper');
var images = null;
var running = null;

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X3', alt: '' } ) );
wrapper.eq(0).append(images);

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y3', alt: '' } ) );
wrapper.eq(1).append(images);

wrapper.hover(
    function() {
        var e = $(this);
        running = setInterval(function() {
            var c = e.find('.active');
            var n = c.next();

            if (!n.length) {
                n = e.children().first();
            }

            c.removeClass('active');
            n.addClass('active');    
        }, 1000);
    },
    function() {
        clearInterval(running);
        running = null;
    }
);

Demo

Try before you buy

Change images on hover

More articles: