I recently created a JavaScript function that successfully replaces the main image on a product page with a different image when clicked. While this feature is functioning perfectly, I am struggling to make the original image return once the mouse leaves the area. My attempts at implementing this functionality have been unsuccessful.
In addition, I am looking to incorporate a slight delay into the process so that there is a brief pause before reverting back to the original image after the mouse is removed. These modifications are specifically for use on the product page of OC 2.3.
this.imagePreview = function(){
$("a.preview").mouseleave(function(e){
$("#image").attr("src",default_image);
});
$("a.preview").hover(function(e){
$("#image").attr("src",this.rel);
});
$(document).ready(function(){
default_image = $("#image").attr("src");
imagePreview();
});
If anyone can assist me in writing the necessary additional code to achieve this desired behavior, I would greatly appreciate it. Thus far, my own attempts have been met with no success.