Greyscale jpg by javascript

Trying to change this picture in the resources that is on stage.

Like to click it and it should change to hue color change or to grey scale (suck the saturation out) would be great. I have included a quick example of what i was working on.

star.hype.zip (14.8 KB) I’m sure it’s something simple that i have over looked.

The Filter Effects "Saturation" doesn't work? Just set it to zero for grayscale, and then back to 1 for color.

1 Like

Yes but i need to do this thru javascript as it will be a script action.

obj.saturation = 0;
obj.hue = 0.5;

something like this…

Without getting too crazy with JavaScript, you could just control a timeline. 0 seconds is zero saturation. The one second mark is 1 saturation. You then can use Hype's JavaScript API for timeline controls.

You could use JavaScript to manipulate the DOM settings manually, but if you manually change the images to grayscale – and use timeline controls – the Hype project size will be larger but you'll have greater browser compatibility.

1 Like

Ok… I see your point there… my head is trying to get wrapped around animation.
Will give it a try!

Hi Steve,

try:

star.style.webkitFilter = "saturate(0)";
star.style.webkitTransition = "-webkit-filter 2s";

This uses the CSS filter (for webkit) but I think Michael’s idea above is a good solution.

1 Like

works like a charm… will have to look up more into that webkitFilter… that is what i was missing :wink:

thanks!