Look at the source code by right clicking and selecting View Page Source. It's the easiest way to see how it's setup.
http://progrowerhtml.coffeecup.com/imagemapper/popup/
Look at it than give it a try.
I added the scripts and links then add the inline class to the image map
areas and altered the href to like this.
href="#pablopicosanchez"
class="inline"
So the
area looks like this when done.
<area name="Pablo Pico Sanchez" shape="circle" coords="196,318,22" class="inline" href="#pablopicosanchez" alt="Pablo Pico Sanchez" title="Pablo Pico Sanchez" OnMouseOver="window.status='Pablo Pico Sanchez'; return true" OnMouseOut="window.status=''; return true">
I then added a hidden div for each
area to the bottom of the page.
<div style='display:none'>
<div id='pablopicosanchez' style='padding:10px; background:#fff;'>
<p>Did you know that <a class="group4" href="colorbox/photos/large/bordered/Pablo_Pico_Sanchez.jpg" title="Pablo Pico Sanchez">Pablo</a> likes to be called “Pico”? Well, his girlfriend (aka his computer) does and likes him anyway. Pico likes thinking of innovative software projects and fresh new ways to enjoy orange juice. (He thinks pulp is great.)</p>
<p>The funniest thing about Pablo is he likes to talk on two phones at the same time. It looks odd when we see him walking around with phones on both ears, but he says it helps him stay balanced. We just wonder who’s on the other end of the second phone all the time.</p>
</div></div>