Image Mapping from PowerPoint to the web

Why?

Add interactivity in PowerPoint for the web.

We had a question on the PowerPoint newsgroup about image mapping. The following is an example of how image mapping can be done and exported to the web.

Now, before you start, you need to check out TAJ's good tutorial on hyperlinking, and Sonia Coleman's tutorial on Screen Tips:

Hyperlinking, TAJ Style

Screen Tips, Sonia Style

Why? Well, I'm not going to redo all of their good work. They've gone into these issues at a much better level than you will find here.

OK...

I started with a map of Australia, which is broken already into states. It was actually a Clip Art that I busted. Remember? Turn it into a Microsoft Picture by ungrouping?

Note, if you had a real picture that couldn't be split, you could instead draw autoshapes over the top of these states and still get the desired effect. Now that is real image mapping, which I have covered towards the end of this section.

So you know where we are going:

1. We will hyperlink each state to a slide that has that particular state on it, with the state faded for effect.

2. We will also hyperlink a box on the slide master to the first slide (Australia).

3. We will add Screen Tips that will pop up on viewing.

1. But before you begin, you need a slide with each state on it. Each slide must be labeled with the state you want to highlight, and give it a title.

We now go back to the first slide and add a hyperlink. Right click on the first state and hyperlink it to the particular slide.

We now need to add the "Screen Tip" while we are here. The Screen Tip will pop up, telling us information about the particular state we are looking at in slide show view. Please note, I learnt this one from Sonia Coleman. Click on Screen Tip in the top, right hand corner, and type in the Screen Tip representing the state.

We do this on the first slide for all states until all are done. We will have to do this for all slides! You decide the easiest way to do this! Now, when this is run as a show, if we click on any state, it will go to that state, and a pop up Screen Tip will tell us the name. But we also need a way to go back to the index slide at the start. I did this by adding a full screen rectangle on the Master Slide, hyperlinked to slide one. Because it will appear behind objects that are not on the Master, it will not interfere with those hyperlinked states. We go View | Master | Slide Master, and draw our rectangle.

We hyperlink it to the first slide and add the appropriate Screen Tip. (The following is a different way to hyperlink). While it works, don't bother, because you still have to edit the hyperlink to get the Screen Tip.

Now we can run the show and it should all work. Click on any sector, and it will go to that state. Click outside the states, and it will go to the first slide.

Now, here is your chance to download an example, before we get to real image mapping.

To download the example PowerPoint file, please right click to save <click here>.

Mapping real images.

Now, I don't have a real image of Australia that I can map, so I'll use the same one, and pretend it can't be split into states. So, we'll assume it can't be busted because it is a picture. The process is quite simple. Instead of hyperlinking to the state sectors, we draw a curved line over the top. Then we hyperlink to that.

Then we hyperlink / Screen Tip that as an overlay. Last, we get rid of the fill and border line of the shape to make it invisible. We can then save as a web page, and it should all function fine.

Now remember, when you draw your autoshape, it does not have to be perfect. No-one will see it when they click on it, so they won't know if it is not pixel perfect. However, you need to do a fairly good job between shapes (or states, in this example). No-one will want to click on a state and get the wrong one pop up.

© Glen Millar

Last Updated: April 02, 2005