JQuery hover effect to replace and preload hover images.

hover-image-jquery-effect.js

jQuery(document).ready(function($) {
			$('.people img').click(function() {
				$('.person_details').slideUp('slow',function(){
					$(this).remove();
				});
				$('.people img.clicked').each(function() {
					var normalImg = NormalImgOf($(this).attr("src"));
					$(this).attr("src", normalImg);
					$(this).removeClass('clicked');
				});
				$(this).addClass('clicked');
				
				var normalImg = NormalImgOf($(this).attr("src"));
				if(normalImg == $(this).attr("src"))
					$(this).attr("src",HoverImgOf(normalImg));
					
				var details = $(this).parents('.people').siblings('.details').html();
				$(this).parents('.et_pb_row_inner').after('<div class="person_details" style="display:none">'+details+'</div>');
				$('.person_details').slideDown('slow');
			});
			
			$(".people img").hover( function() {
				 if(!$(this).hasClass('clicked')){
					 var hoverImg = HoverImgOf($(this).attr("src"));
					 $(this).attr("src", hoverImg);
				 }
			}, function() {
					if(!$(this).hasClass('clicked')){
						 var normalImg = NormalImgOf($(this).attr("src"));
						 $(this).attr("src", normalImg);
					}
			});
			
			/* preload hover images */
			jQuery(".people img").each(function(){
					preload(HoverImgOf($(this).attr("src")));
			});
		});
			function HoverImgOf(filename)
			{
				 var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
				 return filename.replace(re, "$1-Hover.$2");
			}
			function NormalImgOf(filename)
			{
				 var re = new RegExp("(.+)-Hover\\.(gif|png|jpg)", "g");
				 return filename.replace(re, "$1.$2");
			}
			
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}