Hover

[00:00 - 00:10] In the previous lesson, you added overlays to the images, but showing all the overlays all the time is a bit distracting. How about you only show an overlay when you hover over an image? In this lesson , we'll do just that.

[00:11 - 00:22] To do this, we can hook up an OpenC Dragon mouse tracker. OpenC Dragon does a lot of complicated event handling, so it's best to use its systems for events, rather than just using the browser's ad event listener.

[00:23 - 00:40] For the click events, we are listening to the Canvas click event, but for hover , we need to now watch the mouse move events, and the viewer doesn't produce an event for that. Internally, the viewer uses a mouse tracker, which does have additional events, including mouse move. We can add our own at the end of the main function, like so.

[00:41 - 00:54] Give it a try. Open up the developer console and see the numbers as you mouse around. Okay, what we want to do is figure out where you've moved on to and show the overlay for that image. In order for that to make a difference, we're going to want to hide all the overlays at the beginning.

[00:55 - 01:13] To do that, we can introduce a new CSS class, Hidden. Add this new style to your main.css file. Add this one line to your text overlay style definition, so the overlays can fade in and out nicely. Then we want to apply the hidden class to all of our overlays back in main.js.

[01:14 - 01:25] There are several places we could do this, but doing it in the for each and update layout is probably best. That way, rearranging the images hides any ho vers. With that groundwork in place, we can return to our move handler. We'll want to find out who got hit by the mouse, so we can use get hit.

[01:26 - 01:38] What we really want, though, is the image rack rather than the tiled image, because that's where we store the overlays. Let's refactor get hit to return the image rack. Don't forget to update everywhere the calls get hit so it uses an image rack.

[01:39 - 01:43] It should be just the canvas click handler. Now, in the move handler, you can use it there, too.

[01:44 - 01:53] Give it a run. None of the overlays should be visible at first, and as you mouse over them, you should see them fading into view. This is nice, but of course we want them to also hide again when you mouse away .

[01:54 - 02:07] For that, we'll have to keep track of which one we currently have hovered, so we can hide it again when it changes. We can add a hover image rack to our globals. This is a good time to make a function that sets the new hover image and hides the old one.

[02:08 - 02:19] Now, in the move handler, you can just call set hover image rack with the image rack you got from get hit. Note that it'll do the right thing with a real image rack or with null, so it's fine to give it whatever comes out of get hit.

[02:20 - 02:33] Remember how we hit everyone when we change the layout? We should update the hover image rack to match at the bottom of update layout. One more detail while we're in here. If the user mouse is out of your viewer or switches away to another window, it would be good to dismiss the hover.

[02:34 - 02:39] You can do that by adding a leave handler to the mouse tracker. Give it a run and watch those hovers go.

[02:40 - 02:50] Of course, hovers don't work on mobile devices, which is probably where a lot of your audience is. For them, how about we add the overlays whenever they tap on an image and turn off the overlays when they tap out of an image?

[02:51 - 03:00] That's easily added to the click handler. You've learned about the mouse tracker and used it to follow the mouse. You've done some more refactoring and now have a nice system to keep track of overlay states.

[03:01 - 03:13] And of course, you're hiding and showing the overlays. Congratulations, you've now completed the app. Read on for some closing thoughts, but first, check out the next lesson for some exercises to practice what you learned in this module.