I have a unique idea for my webpage where I want to showcase a grid view of black and white images. When I hover over each image, it transforms into a colored version. Additionally, clicking on an image will not only change it to color but also add a tick mark.
To implement this feature, I utilized the following script and HTML code:
SCRIPT
$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
this.src = this.src.replace("_blackwhite", "_color");
$('#tick_' + $(this).attr('rel')).show();
} else {
this.src = this.src.replace("_color", "_blackwhite");
$('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});
HTML
<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><a href="#"><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" /></a>
The current setup works perfectly fine, however, there is an issue with the mouseout function causing the images to revert back to black and white once the mouse moves away.
Are there any alternative ideas or solutions to resolve this problem effectively? Thank you in advance.