A 15-minute recipe for interactive content navigation

We managed to catch your attention with that headline, right? For a change, unlike most such headings, this one is true.

Adobe Creative Cloud makes creating interactive content navigation of the visual kind truly a breeze. All you need is some working knowledge of an included image editing application—Illustrator or Photoshop; take your pick—and Dreamweaver. You won’t be writing even a single line of code in the process; only copy-pasting it.

Seeing is believing, you say. Well, let’s get you started.

Beforehand…

Before you go any further with the steps described in the rest of this post, ensure that the authoring/publishing environment where you’ll eventually use the visual navigation aid supports raw HTML content. Also, figure out the maximum image width that the environment allows. If necessary, check with an admin. For example, the authoring environment that we’ll use for illustrative purposes in this blog post allows a maximum image width of 550 px.

Just in case you haven’t completely understood what we mean by “interactive content navigation”, you can see an example in action at Photoshop Help | A first look at the Photoshop workspace. Clicking a highlighted area on the screenshot opens up a learning content page offering more information about the relevant area of the Photoshop workspace.

There aren’t any additional prerequisites. You’ll simply start with a screenshot or an image whose areas you want to hyperlink to the appropriate content resources.

Here’s the end result that we will work towards; go ahead, click the labeled areas on the image:

Prepare the image in Illustrator or Photoshop

The Illustrator/Photoshop part of this workflow is fairly basic. All you need to do is define some highlight areas on the image that users will want to click. Notice the red transparent boxes in the screenshot? We added those boxes in Illustrator using the Rectangle tool, keeping the borders red—strokes weighing 3 pt and colored f20f0f—and the fills transparent.

That’s all there is to preparing the image. You could create those boxes using Photoshop if that seems easier to you.

Once you’ve added the image highlights, use the Save For Web command in Illustrator or Photoshop to save your image as a high-quality JPEG or PNG graphic. We saved the screenshot as Ps_CC_workspace.png.

Host the image

Before you begin working on the image in Dreamweaver, host it at a location where your readers can access it. If you’ll be adding the visual navigation aid to a live page eventually, you may want to have a public URL for it. We simply uploaded our screenshot to the Files area of this blog: http://blogs.adobe.com/contentcorner/files/2014/12/Ps_CC_workspace.png.

Create the image map in Dreamweaver

Now, we’re ready to add interactivity to the image. We’ll use a Dreamweaver feature called Image Maps to do so. Follow these steps in Dreamweaver CC:

1. Select File > New > HTML. Now, in the New Document dialog, select <none> in the Layout column and then click Create.
2. Switch to the Design view. Select View > Design.
3. In the Design view, select Insert > Image > Image. Navigate to a local copy of the image you created in Illustrator/Photoshop and click Open. If you’re prompted that you need to save the document first, ignore the prompt for now and click OK. Dreamweaver places the image in the Design view.
4. Switch to the Code view—select View > Code—and then look for the <img.../> tag in the HTML code.
5. Change the value of the src attribute of the <img> tag to the hosted URL for the image.
6. Set the width attribute of the <img> tag to the maximum width that your authoring environment allows. Set the height attribute proportionately.
7. Enter a text value for the alt attribute of the <img> tag. Your final <img.../> tag should look something like the following line of HTML:
   <img src="https://blogsimages.adobe.com/contentcorner/files/2014/12/Ps_CC_workspace.png" alt="A first look at the Photoshop workspace" width="550" height="300"/>
8. Switch back to the Design view (View > Design).
9. Select the image and then bring up its Properties (Window > Properties).
10. If you can’t see the Map area in the Properties panel, click the Expand arrow in the far bottom-right corner of the Properties panel.
    
    
    Alternatively, double-click right beneath the ID field in the Properties panel.
    
    
11. Select the Rectangle Hotspot tool.
    
12. Draw a rectangular hotspot on the image, closely aligning it with the corresponding image highlight you created earlier in Illustrator/Photoshop.
13. In the Properties panel, enter the target URL for the hotspot in the Link box. If you want the target page to open in a new browser window, select _blank from the Target pop-up menu. You can choose one of the other Target options if necessary. Here’s what they do.
    
14. Draw more hotspots. Once you’ve created all hotspots, switch back to the Code view (View > Code).
15. Copy the raw HTML code and paste it to your content page in the right location. And you’re done!

An on-page navigation example

Just as you used this workflow to create an interactive navigation aid linking to external pages, you can use it to simplify navigation within a page. In Step 13 of the procedure above, enter the relative location of the target anchor in the Link box—for example, #Mar_2015—and then select _parent from the Target pop up menu.

See Adobe Story Help | New Features Summary for an example of a primitive timeline implemented using this approach.

Don’t forget localization

If your content serves multiple locales, your organization’s localization teams might have to translate the image. Once they’ve translated the image, they’ll need pointers to recreate the hotspots for the translated versions. In most cases, it should suffice to change the value of the src attribute in Step 5 of the procedure above to the hosted location of a translated image.

While communicating with the localization teams, share the Illustrator/Photoshop source of your image and feel free to point them to this blog post for more information.

And that’s not all…

This blog post discusses two simple ways of implementing interactive content navigation. If you have ideas using this concept that could make content experiences richer, make good use of the Comments section below. We’re all ears!