Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's add an interactive image into our Explore California Travel Guide. If you're following along, I'm on page 30 in the Nature Watch section. First, let's begin by making a little room for our widget. We'll get rid of this image that we added earlier by simply clicking on the image and then hitting the Delete key on our keyboard. That will get rid of the image altogether. Next, let's add our widget. To do this, go up to your Toolbar and click on the Widget dropdown menu and select Interactive Image. An Interactive Image Widget object appears on our page and our Widget Inspector is automatically opened for us.
We can then change the object to a Floating object and simply drag it into place using our alignment guides to help us get the alignment correct. Next, we'll go ahead and add our image. I've included a folder called Interactive Image files in the Chapter 10 exercise files. And in there, you should find an image called chiton.jpg. Go ahead and take that image and simply drag it and drop it directly on to our object. We can then click back inside of iBooks Author and begin customizing our widget. The first thing we want to look at is over here on the Widget Inspector.
Let's go ahead and check the box that says Show Transport Controls. Now, the Transport Controls are down here at the bottom and they allow our users to be able to easily navigate among the various different views of our document. It's a great way to work, so I like leaving this option this available to my users. The next option in our Widget Inspector is the ability to show descriptions in a sidebar. Now, right now we've got the view set in the default view which has these small text bubbles that are linking to the image. When we check the box that says Show descriptions in the sidebar, the descriptions that were in the bubbles are now appearing in this sidebar.
This is a nice effect in a lot of different layouts. However, in my layout, I'm going to go ahead and leave this option unset and use the Default view. And speaking of views, let's go ahead and turn our attention to the views next. Then let's start with the Default view. Go ahead and click one time on the Default view in the View section of the Widget Inspector. And then let's adjust the zoom of our image using the heads-up display that appears here on screen. We can simply drag the slider to zoom our image in or out. I'm going to go ahead and set my image zoom down to about 25%.
When I get the image set the way that I wanted, go ahead and click the blue button that says Set View. This locks the view into place. Next, we'll go and do the same thing for the other points of interest. We'll go ahead and select the first view, adjust the slider to the appropriate level of zoom, we can even click inside the image and drag around until we get the image centered exactly where we want it. You can grab the text bubbles and move those to a desired location, and you can grab the end of the line so that you can point it to a particular point on the image that you want to highlight.
Once you get everything locked in place, go ahead and click the Set View button in your heads-up display. Then go ahead and change the text starting with the Title. Go ahead and triple-click on the text to select it, and we'll name this object The Fuzzy Chiton. We'll next edit the Description by triple- clicking on the text there and type in a description. I'm going to type in the Fuzzy Chiton gets its name from the tuffs of hair that grow around the outer edges of its body. Once you get the text entered in, you can then apply styling to the text if you'd like.
I'm going to go ahead and triple- click on my text then let's go ahead and minimize the size of our window and open up our Style sidebar. With our text selected, I'll go ahead and apply a character style of emphasis. This allows the text to show up a little bit cleaner. I don't like the wrapping of the text in the bottom of this window, so I'll deselect and then use the grabber handle to adjust the width of the text box. All right, our first view is fully set. Now, let's go ahead and deal with the second view. To do this, go ahead and click in the second view in the View section of the Widget Inspector, and once again, we'll zoom out our view, we'll move our text bubble to where we want it, and we'll adjust the pointer so that it's pointing at the object that we want to call attention to.
In this case, we want to call attention to the snail over here. I'll go ahead and drag my view around, keep making adjustments until I'm happy with the way things are looking. That's looking much better. All right, let's go ahead and lock that in by clicking the Set View button and then edit our text. Again, I'll triple-click on the title, and this time, I'll simply type in Snail. With the text description, I'll triple click on the text to select it and then enter in Small intertidal snails are at home under the water or on the land. Once you have your text typed in, go ahead and triple-click on the text again, and if you want to apply a character style, go ahead and do that now.
I'm going to apply the Emphasis style to my text. And once again, I'll deselect, and then adjust the width of my text box so that I get a nice wrapping of text. I once again click the Set View button, and now everything is all set for our second option. Let's go ahead and add a third view. To do this, I'm going to start by clicking on the Default view over my Views window to zoom out to the full area of my image. I'll then go ahead and click the Plus button at the bottom of the View section to create an additional view. I'll go ahead and move that view down to the bottom so it appears as the third view.
I'll then select the third view. I'm going to move my text first down here to this lower area and then grab the pointer and move it down here into this area. For this portion of the image, I'm going to have to zoom in quite a bit. So I'll zoom in, pan my image over, and what we want to see are these two small little crabs that are right here on the rock. They're really hard to see unless our image is zoomed in pretty far. So we will go ahead and zoom in, and move our thought bubble, and move the text level until it's in place. Now, we can go ahead, lock in our view by clicking the Set View button, and then edit our text. We'll begin with the Title.
So we will triple-click on the title, and this time we'll type in Glass Crabs. We'll then triple-click on the text description to select it, and we'll type in Glass Crabs are small intertidal crabs. Once again, we can apply the Character Style format by triple-clicking on the text description and then clicking on the Emphasis Style to apply it. Now that we have everything set the way that we want it, we can go ahead and close our Styles panel and re-maximize our window. Things are looking pretty good here, so we'll go back to the Default view and check and see how everything is looking. All right, our page is looking pretty good.
The next thing you'd want to do is click on each of the views and at the bottom of the Widget Inspector, click the dropdown menu under Accessibility Descriptions and add some more detailed information for the screen readers. So we'll go ahead and select Image for Default view under the Background setting, and we'll type in Photograph of a common intertidal zone in California. We can then select each of our different views and check the Label Title, Description, and Target, and make sure that the text appears for each of those as to what we want to have said for our screen readers.
Finally, we'll go ahead and click on the Layout tab of our Widget Inspector to improve a couple of more changes in our layout. We'll make sure our Title label is set to Figure so that matches all the other Figures throughout our Explore California Travel Guide. We can choose to add a caption if we would like. In this case, I'm going to go ahead and select the caption. I'm going to move my heads-up display and then triple-click on the text to select it and type in Common intertidal invertebrates found along the California Coast by our explorers. I'll also go ahead and edit my Figure title, by clicking on the title, selecting the text, and typing in a description for this image.
We'll type in Intertidal Invertebrates for the title. Finally, we'll go ahead and check the box for background color, and then with our object selected, we can go ahead and change the fill color to something that make it stand out a little bit more on our page. All right, there we go. Things are looking pretty good. When we deselect, we go out to the Default view and everything is set up for us. Now, when our users come to our page they'll be able to click on each of the different views and get detailed information about that view. The Interactive Image Widget is a great tool for adding a lot of detailed information about a particular image.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57517 Viewers
119 Video lessons · 67106 Viewers
84 Video lessons · 16538 Viewers
125 Video lessons · 29456 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.