CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
BobDroid
BobDroid

Reputation: 1908

How to overcome from this issue in image hover?

In my page i want to display a list of black&white images in grid view, when i hover the mouse over this image it displays the color image. When i move the mouse away, again the black&white image should be shown.

When i clicked a particular image (i.e- a black&white image) it should be turned to a color image at the same time in addition to this a tick mark image should be added.

I used 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>

I used the above code, all works fine but when i move the mouse out again the image turns black&white image (because i used mouseout function)

Is there any other better idea available? or

How to overcome from this issue? Thanks in Advance

Upvotes: 0

Views: 158

Answers (2)

mesimplybj
mesimplybj

Reputation: 639

When you click the Image Then Leave some Footprint there. Like change the Class of the Image, now in your mouseout function check the condition if the image has that particular class or not. If there do nothing, else change the image color.

Upvotes: 0

CoderMarkus
CoderMarkus

Reputation: 1118

I would suggest adding a class to the image when you click. Then when the mouseout function execute, simply include an if/then that only swaps the image back to black and white if the class is NOT present.

Upvotes: 1

Related Questions