Hi Rob,
Assuming you have an html editor like MacroMedia (or nowadays Adobe) DreamWeaver, I would advise to use "hotspots".
Create a new html page. Insert your image in that page and then for the image, you are able to draw hotspots for the areas you wish. Those areas (hotspots) can have the url's you want.
[attachment=1:1b9j2z02]<!-- ia1 -->Dreamweaver.jpg<!-- ia1 -->[/attachment:1b9j2z02]
Once you have created the DreamWeaver page, you will need to go into source view and copy the html code. In my sample the code would be in between the <body> and </body> tags (DO NOT COPY THOSE!)
So the code of my sample to use in Joomla is:
<img src="http://joomla15.joomtorial.com/images/stories/graph.png" width="512" height="512" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="168,386,142,332,131,241,207,218,240,268,241,360" href="http://www.google.com" target="_blank" alt="orange" />
<area shape="poly" coords="264,352,243,314,243,269,235,253,233,139,311,118,345,167,334,330" href="http://www.yahoo.com" target="_blank" alt="green" />
<area shape="poly" coords="355,320" href="#" /><area shape="poly" coords="355,321,338,298,349,162,333,143,342,24,421,4,465,48,424,298" href="http://www.msn.com" target="_blank" alt="blue" />
</map>
When you want to use this code in Joomla, you can't simply use the WYSIWYG editor. You will need to go to Joomla's Global Configuration and set your editor to "No Editor". Only then paste the code from DreamWeaver otherwise your WYSIWYG Joomla editor will rewrite and leave important codes out.
[attachment=0:1b9j2z02]<!-- ia0 -->Joomla Video Tutorials - Administration.jpg<!-- ia0 -->[/attachment:1b9j2z02]
I created a working sample of this and that can be seen here:
http://joomla15.joomtorial.com/index.ph ... &Itemid=53 
