Databases
StackOverflow2013
Postsdbo
POToggle Desaturation on image onClick in css / javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POToggle Desaturation on image onClick in css / javascript
    text
    copied!<p>There is more code to each function, but these are the main lines that matter in regards to my question I believe...This is from a guys library to desaturate an image on rollover basically.</p> <p>How do I change it to on click, rather than on mouseover / rollover? Here's his code...</p> <pre><code>jQuery(function($){ $cloned.closest(".DesaturateDiv").bind("mouseenter mouseleave",desevent); } function desevent(event) { if (event.type == 'mouseenter') $(".des.color", this).fadeOut(275); if (event.type == 'mouseleave') $(".des.color", this).fadeIn(200); } </code></pre> <p>I've already tried changing both if statements to a jquery toggle as well as changing the top line from .bind("mouseenter mouseleave", desevent) ... to .bind("toggle", desevent) and it still didnt work. my question is basically how to substitute mouseenter and mouseleave to onClick so the image desaturates onClick then saturates again onClick. Heres my toggle code that I put in instead of the two if's above, just incase.</p> <pre><code>$('.DesaturateDiv').toggle(function() { $(".des.color", this).fadeOut(275); }, function() { $(".des.color", this).fadeIn(200); }); </code></pre> <p>Also, on a related note, could you do this with css3? here's the code to desaturate an image with css3...</p> <pre><code> img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); } </code></pre> <p>So my question would be how to do it oncick? </p> <p>I tried img.desaturate:active{} but it didn't work?</p> <p>EDIT: I tried this and think something along these lines is what I need but im sure the syntax is not correct, help??</p> <pre><code> function desevent(event) { i = 0; if( i = 0 ){ if (event.type == 'mousedown') $(".des.color", this).fadeOut(275); i = 1; } if( i = 1 ){ if (event.type == 'mousedown') $(".des.color", this).fadeIn(200); i = 0; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload