PrestaShop rollover images solution

example.tpl

<img class="rollover-images" data-rollover="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.name|escape:html:'UTF-8'}" />

Link.php

<?php
class Link extends LinkCore
{
  /**
	 * Returns a link to a product image for display
	 * Note: the new image filesystem stores product images in subdirectories of img/p/
	 *
	 * @param string $name rewrite link of the image
	 * @param string $ids id part of the image filename - can be "id_product-id_image" (legacy support, recommended) or "id_image" (new)
	 * @param string $type
	 * @param integer $rollover id of current product
	 */
	public function getImageLink($name, $ids, $type = null, $rollover = null)
	{
		$not_default = false;
		// legacy mode or default image
		$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');
		if ((Configuration::get('PS_LEGACY_IMAGES')
			&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg')))
			|| ($not_default = strpos($ids, 'default') !== false))
		{
			if ($this->allow == 1 && !$not_default)
				$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
			else
				$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg';
		}
		else
		{
			// if ids if of the form id_product-id_image, we want to extract the id_image part
			$split_ids = explode('-', $ids);
			$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);
			$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');
			
			if(isset($rollover))
			{
				$hover_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$rollover.' AND position = 2');

				if($hover_image)
					$id_image = array_shift($hover_image);
				else
					return '0';
			}

			if ($this->allow == 1)
				$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
			else
				$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg';
		}

		return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;
	}
}

rollover.js

<script>
function makeRolloverImages()
{
	$(function() {
		$('.rollover-images').each(function()
		{
			var newSrc = $(this).data('rollover');
			if(newSrc == 0) return;
	
			var oldSrc;
			$(this).hover(function()
			{
				oldSrc = $(this).attr('src');
				$(this).attr('src', newSrc).stop(true,true).hide().fadeIn('slow');
			}, function()
			{
				$(this).attr('src', oldSrc).stop(true,true).hide().fadeIn('slow');
			});
		});
	});	
}
makeRolloverImages();
</script>

thanks for the solution its working fine but their is a problem when i place the mouse on image it change the image but when i place out the mouse from the image . it not return to a first image which was present before the mouse hover kindly give me the solution to solve this issue its very urgent for me. Thanks in advance