Interactive image maps and lightboxes are some ways to add surprise and delight to the user's experience. Or add quick views with a lightbox. No matter how you use them, this video will show you the how to.
- [Instructor] Visitors coming to the Landon Hotel in London might be interested in the Attractions nearby, therefore, they might be interested in learning more about where they can go and what they can do. And so for our website we're going to add a section on Attractions where they can interact with an Image Map in order to see what they can do nearby. Now, what we've already done is dragged in a couple Hot Spots which are these little spots here that you can see on both Tower Bridge and Big Ben and we've named them.
In this case, parliament for Big Ben because that's actually what it's going to point out and for Tower Bridge I've named it tower. Now they're down here as well so they show as Hot Spots in our Outline and then we've also created the Lightbox's image. So for Tower Bridge we have this whole group called towerLB and for Parliament we have parliamentLB. Each of these will show as a Lightbox over what we have here and so right now if were literally to go ahead and paste them here it wouldn't really look that great, right, because we wouldn't have the Opacity in the background and it would kind of get lost.
So let's go ahead and set that up. Click on our Big Ben or parliament (Hot Spot), and let's go over to our Properties, and double click on OnClick, and now from here we're going to do a Show, and we're going to choose, because we're doing Parliament, we're going to choose our parliament Lightbox. And now we have the Option to treat as lightbox in our More Options, down here below.
You'll see that our Case is Show parliamentLB treat as lightbox, click OK, and let's go ahead and Preview that. Now it's showing as a Lightbox. Now let's talk about how we can go ahead and change some Options and make some things a little bit different 'cause you notice that's far off on the right-hand side of the panel. And if we're looking at this, especially in Mobile, this isn't going to work at all so let's go ahead and go back to Axure and let's put things in the position of where we want them to be, and then what we'll also do is Hide them, and then we'll take this other one, the Tower Bridge, and go ahead and put it over Parliament, and we'll hide it as well.
Now you may wonder because our Hot Spots are now inaccessible because we have these two panels at the top, that's okay because this is an opportunity for us to use the Outline over here. So for parliament let's go back into that Hot Spot and double click again on the Case. Now the other thing we can do here is we can change the Background Color and we can change the Opacity. Right now it's giving us this kind of greenish-gray color and the Opacity at 61% so if we think that's too dark we can change that to say 50% or we can just type it in here.
If we want something that's more gray we can choose a gray color and we can click OK. So let's go ahead and set up our Tower Bridge, Lightbox as well, so go ahead and click on that, double click on OnClick, and go ahead and do our Show. And then for this one because we're doing the tower we want our tower to show, and then we also want to treat it as a lightbox. And see it grabs the same Color, it should have both the same Options in here and it does so go ahead and click OK.
Now, how do we close up a Lightbox after we get it open? So let's go ahead and double click and we can get inside to our Tower Bridge Option here. And what we want to click on is this X because that's the close, right? So let's go ahead and double click on OnClick and we'll say Hide. And for this one because we're on the tower we want to go ahead and Hide the tower and then click OK.
And let's do the same thing with parliament, go find our X, and then on the X let's go ahead and double click on OnClick, and Hide parliament, and everything else should be good, let's go ahead and test that. So here's our Image Map and voila, there we got Parliament in the right spot, Tower Bridge in the right spot. Now you'll also note that looking at this you have the Lightbox all the way across the page.
Unfortunately, there's not anything to do, you can't change that in Axure, there's just nothing we can do with that. But if you did look at this from a Mobile View and just shrink our page you'll see that it looks like the way it's supposed to and that's how to do Lightbox in Axure.
- Using widgets
- Setting up interactions
- Building an adaptive page
- Styling pages and widgets
- Creating forms
- Adding text fields, dropdowns, and check boxes
- Hiding and showing menus
- Creating carousels