New Example on the site

Ask the community
,
1

Showing a picture as black and white

1190×702 150 KB

But on hover, add some color and labels

1192×700 217 KB

6 Likes
2

Pretty! Thanks!

3

I like this a lot!

4

Thank you! Because of this post, I found the Examples page! Lol! Didn’t know it was there!

5

Hi. I have tried to replicate the rollover effect with two photos and a hotspot but can’t get the code to work. Here is a screenshot -could you let me know where I am going wrong as I’ve spent an hour trying to figure it out…

1280×865 239 KB

Thank you code geniuses…

6

You can do it with two images and no hotspot.

//When the mouse enter the area of the initial image show the second image
export function initialImage_onMouseIn(){
    $w("#theSecondImage").show();
}

//When the mouse leaves the second image, which is now on top, hide it.
export theSecondImage_onMouseOut(){
    $w("#theSecondImage").hide('FadeOut');
}

In the editor, put the second image on top of the initial image and set it to ‘Hidden on load’ in the property panel.

Shay

7

Thank you Shay- that worked! However, Initially I had the boxes on a strip and that didn’t work- so should not we place the images on strips?

8

I don’t see a reason why you can’t use images on a strip.

When you bind events to editor elements, you need to make sure nothing prevents the element from getting the event. In my code sample when you move the mouse inside the initial image the mouseIn event is fired, and at this point we show the second image. Now if we put the mouseOut event on the initial image it wouldn’t work since the second image, which is now on top, covers and blocks the initial image from the mouse.