Tip:
Highlight text to annotate it
X
One interesting thing you can do with images you insert into a topic here in
RoboHelp is create an image map on them,
that is, to create hotspots so that users of your Help system can click areas of
the graphic itself, which will link them to other locations.
It could be within the project.
It could be outside of the project, like a web site, for example.
We're going to do that using our Using LDC project here, and we're going to go to
the Membership topic and scroll down to the bottom.
Just click after Cancellation Policy.
There's already a number of links here.
We're going to hit Enter a couple of times just to leave some space, and we'll
insert a graphic that we'll use to create an image map.
So let's go up to Insert.
You could go down to Image,
use Ctrl+G. You'll also notice that there is a button on the Linking toolbar
for inserting images.
When you do that, you'll see the image window we've seen if you've been
following along when inserting different types of graphics into our project.
We're going to navigate to the 06_04 subfolder of your exercise files if you have them.
There is an LDCMap. It is a GIF image.
I'll select it and click Open.
And you can see in the preview that this is huge, so we should probably size it
down before we insert it.
And clicking the Size button allows us to do that.
Look how big that is.
So let's just drop it down.
We'll keep the aspect ratio checked off and change the width from 1878
to something like 400.
Notice the height is changed for us
when we click OK. That's looking a little bit better in the Preview.
And when we click OK, if you see the overwrite, it means you've already used this image.
If this is your first time, you will not see this.
I'm clicking Yes, and there it is; there's my graphic.
And notice that there's two parts to this graphic that I think would work
well with an image map.
Maybe people should be able to click the JOIN NOW!
part, and that would take them to the lynda.com web site where they could join.
And maybe over here where it says READ FEEDBACK, they could go directly to the
Testimonials page at lynda.com.
So we need to create those hotspots, and that's what we're going to do next.
On the same toolbar we used to insert the image,
you'll also see that we have the ability to create these shapes, but the shapes
can be used to create image maps.
So I think the circle would be the best option here for our graphic.
Click the image first, then click the circle, and now go right to the center
of the JOIN NOW circle--or at least as close as you can get--and then just
click and drag outwards.
Don't worry if it's not perfect.
When you let go, you'll see that the Image Map dialog opens up, prompting you
to link to something.
And in this case, we want to link to the lynda.com web site, but we also want to link
directly to a specific location.
So we'll just flip over to our browser and go there, and then we'll copy that address.
So here at lynda.com, if we go to the subscribe link from the homepage, this is
where we want our users to go if they click JOIN NOW.
So let's go up to the very top.
We'll just click where we see the address; that selects it all. Ctrl+C is the
keyboard shortcut for copying that, and now we'll switch back to RoboHelp.
We left off at the Link to field, and you can see our cursor flashing there.
All we have to do now is paste in the address, Ctrl+V, and click OK.
Notice that the circle that we drew is now red, indicating that it is a hotspot.
And of course, we'll want to adjust this, probably size it down a little bit.
And if you're having difficulty seeing the whole thing, don't worry. You can
just move it around,
go to the sizing handles, drag it down until it fits just right.
It doesn't have to be perfect.
Remember, users aren't actually going to see that circle.
They're just going to see a hotspot when they hover over the JOIN NOW section.
So let's just deselect by clicking outside the graphic.
That's one half. The other half I'm going to leave to you to finding the
Testimonials site at lynda.com and creating another hotspot over the READ
FEEDBACK section of our graphic.
For now though, we'll just click Save and we'll test this out.
Let's do Ctrl+W on the keyboard to preview.
There's our graphic down below. Notice when we move our mouse around we see the
mouse pointer; as we move over READ FEEDBACK, no change;
but when we get to JOIN NOW, we see the pointing finger indicating there is a hotspot there.
So when we see that pointing finger, just click and it takes us directly to the
right page at lynda.com for signing up.
So we'll close up our preview now. It returns us to RoboHelp where you have a
little bit of homework, and that is to add a second hotspot over the READ little bit of homework, and that is to add a second hotspot over the READ