Return to Answer

• Working jsFiddle Example (version 1)

• Working jsFiddle Example (version 2)

Here's a working example (version 1):

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } $(function () { $('img.xyz').hover(sourceSwap, sourceSwap); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /> <br/> <img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /> <br/> <img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

And here's the second version:

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } $(function() { $('img[data-alt-src]').each(function() { new Image().src = $(this).data('alt-src'); }).hover(sourceSwap, sourceSwap); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /> <br/> <img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /> <br/> <img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" /> <img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" /> 

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } 

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () { $('img.xyz').hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 1)

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

$(function() { $('img[data-alt-src]').each(function() { new Image().src = $(this).data('alt-src'); }).hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 2)

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" /> <img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" /> 

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } 

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () { $('img.xyz').hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 1)

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

$(function() { $('img[data-alt-src]').each(function() { new Image().src = $(this).data('alt-src'); }).hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 2)

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" /> <img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" /> 

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } 

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () { $('img.xyz').hover(sourceSwap, sourceSwap); }); 

Working jsFiddle Example

Here is Andres Separ's example from the comments. You don't need to decorate your images with a class and it will preload the alternate source to help eliminate any lag or flicker when hovering:

$(function() { $('img[data-alt-src]').each(function() { var $this = $(this); new Image().src = $this.data('alt-src');   $this.hover(sourceSwap, sourceSwap);  }); }); 

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" /> <img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" /> 

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } 

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () { $('img.xyz').hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 1)

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

$(function() { $('img[data-alt-src]').each(function() { new Image().src = $(this).data('alt-src'); }).hover(sourceSwap, sourceSwap); }); 

• Working jsFiddle Example (version 2)