[jQuery] Re: Change image to black and white on hover
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 benv...@gmail.com
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 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.
[jQuery] Re: Change image to black and white on hover
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 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.
[jQuery] Re: Change image to black and white on hover
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 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.
[jQuery] Re: Change image to black and white on hover
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 gordon.mc...@ntlworld.com 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 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.
[jQuery] Re: Change image to black and white on hover
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.
[jQuery] Re: Change image to black and white on hover
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.
[jQuery] Re: Change image to black and white on hover
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.
[jQuery] Re: Change image to black and white on hover
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.
