When you apply the effect the <img> is replaced by a <canvas> tag (on
browsers other than IE). To 'reset' it you need to reappend the
original image, and for the events you need a parent element otherwise
you'll lose them:
<div id="test">
<img src="test.jpg" alt="" />
</div>
var img = $("#test img"); //save the image for later
$('#test').hover(function() { //apply the handlers
$('img', this).pixastic("desaturate");
}, function() {
$('#test').html(img);
});
});
In my opinion that's overly complicated and won't have very good
performance, you're better off creating a simple :hover with CSS and
two images.
- ricardo
On Dec 23, 2:20 pm, "Paul Collins" <pauldcoll...@gmail.com> wrote:
> Hi all,
>
> I'm a little stuck and I can't seem to get exactly what I'm after
> googling....
>
> Basically, I want to apply the "pixastic - desaturate" function when I hover
> over an image. I've got this working, but I want to be able to remove that
> effect when I mouseout of the image. I can't for the life of me find
> something that removes a function, only a class. Here is my code, as I say
> the hover state works when you mouseover, but the mouseout effect isn't
> working:
>
> // greyscale on hover
> $(document).ready(function() {
> // find the div.fade elements and hook the hover event
> $(".test").hover(function() {
> $(this).pixastic("desaturate");
> }, function() {
> this.reset();
> });
>
> });
>
> Thanks for any help.
> Paul
>
> 2008/12/23 Paul Collins <pauldcoll...@gmail.com>
>
> > That works perfectly with JQuery Nathan. Thanks for your help. Much
> > appreciated.
>
> > Paul
>
> > 2008/12/23 Nathan <i...@nathan-adams.net>
>
> >> It's not jQuery (although I believe it can act as a plugin - check the
> >> documentation), but this library covers that kind of image
> >> manipulation:
> >>http://www.pixastic.com/
>
> >> On Dec 23, 9:16 pm, "Paul Collins" <pauldcoll...@gmail.com> wrote:
> >> > Hi all,
>
> >> > I'd like to think this is possible with JQuery, but can't find a
> >> reference
> >> > online.
>
> >> > Basically, I have a bunch of coloured logos that have links wrapped
> >> around
> >> > them. I would like to create a hover state using JQuery that makes the
> >> > images turn black and white when you hover over them. Currently I am
> >> > creating two images - one colour, one black and white then swapping them
> >> out
> >> > using CSS. If I could create the black and white hover state using
> >> JQuery,
> >> > it would save a lot of hassle.
>
> >> > Would appreciate any help.
