Quantcast

Change image to black and white on hover

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Change image to black and white on hover

desmondo
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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

Gordon-35

The only way to do that without a separate black and white image would
be to use the filter CSS property, which is nonstandard and would only
work in internet explorer.

On Dec 23, 11:16 am, "Paul Collins" <[hidden email]> 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

desmondo
That's a shame, thanks for letting me know Gordon.

Are there any other similar hover effects that could be achieved with JQuery?

Cheers
Paul


2008/12/23 Gordon <[hidden email]>

The only way to do that without a separate black and white image would
be to use the filter CSS property, which is nonstandard and would only
work in internet explorer.

On Dec 23, 11:16 am, "Paul Collins" <[hidden email]> 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.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

Nathan-79
In reply to this post by desmondo

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" <[hidden email]> 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

desmondo
That works perfectly with JQuery Nathan. Thanks for your help. Much appreciated.

Paul


2008/12/23 Nathan <[hidden email]>

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" <[hidden email]> 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.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

desmondo
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 <[hidden email]>
That works perfectly with JQuery Nathan. Thanks for your help. Much appreciated.

Paul


2008/12/23 Nathan <[hidden email]>


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" <[hidden email]> 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.


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

ricardobeat

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" <[hidden email]> 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 <[hidden email]>
>
> > That works perfectly with JQuery Nathan. Thanks for your help. Much
> > appreciated.
>
> > Paul
>
> > 2008/12/23 Nathan <[hidden email]>
>
> >> 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" <[hidden email]> 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

Benoit Villière
In reply to this post by desmondo

Hello there!

I think you can find a way to perform this effect with a nice
transition here : http://jqueryfordesigners.com/image-cross-fade-transition/

I hope it'll help!

Happy new year everyone

On 23 déc 2008, 17:20, "Paul Collins" <[hidden email]> 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 <[hidden email]>
>
> > That works perfectly with JQuery Nathan. Thanks for your help. Much
> > appreciated.
>
> > Paul
>
> > 2008/12/23 Nathan <[hidden email]>
>
> >> 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" <[hidden email]> 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change image to black and white on hover

desmondo
Thanks for your replies everyone. Sorry for the delay, but I've been away for the festive season :)

Ricardo, your script works well, but if I have multiple images on the same page using the same class it resets all images to the original image we stored! Is there a way I could use it on multiple images with the same class on the same page?

I originally had these images in a CSS hover. But, the images are part of a CMS and I would have to teach the client how to create a single image with two states, which is not preferable. So, I would prefer to try a script if I can and keep it simple for them.

If you could help me get it to work for multiple images, that would be great. All I really want to do is set the same image back to it's original state - was hoping it would be simple :)

Thanks for your email too Ben, but I think it works the same way where I need to create two images.

Thanks again.
Paul


2009/1/3 BenV <[hidden email]>

Hello there!

I think you can find a way to perform this effect with a nice
transition here : http://jqueryfordesigners.com/image-cross-fade-transition/

I hope it'll help!

Happy new year everyone

On 23 déc 2008, 17:20, "Paul Collins" <[hidden email]> 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 <[hidden email]>
>
> > That works perfectly with JQuery Nathan. Thanks for your help. Much
> > appreciated.
>
> > Paul
>
> > 2008/12/23 Nathan <[hidden email]>
>
> >> 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" <[hidden email]> 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.

Loading...