Here is an example of how to structure this:
<style>
body {
padding:0;
margin:0;
}
.arvore {
width:788px;
height:776px;
border:1px solid #000;
}
.pessoa {
position: relative;
width: 378px;
height: 312px;
margin: 443px auto;
border: 1px solid #000;
}
.copa ul li {
width:209px;
height:104px;
border:1px solid #000;
list-style:none;
position:relative;
border:1px solid #000;
float:left;
}
.copa ul li#ft1 {
background: url(imagens/ft1.jpg) center center no-repeat;
margin: 0 248px 0;
}
.copa ul li#ft2 {
background: url(imagens/ft2.jpg) center center no-repeat;
margin-left: 145px;
}
.copa ul li#ft3 {
background: url(imagens/ft3.jpg) center center no-repeat;
}
.copa ul li#ft4 {
background: url(imagens/ft4.jpg) center center no-repeat;
clear:left;
margin-left: 35px;
}
.copa ul li#ft5 {
background: url(imagens/ft5.jpg) center center no-repeat;
margin-top: 22px;
}
.copa ul li#ft6 {
background: url(imagens/ft6.jpg) center center no-repeat;
}
.copa ul li#ft7 {
background: url(imagens/ft7.jpg) center center no-repeat;
margin-right: 145px;
margin-top: -22px;
}
.copa ul li#ft8 {
background: url(imagens/ft8.jpg) center center no-repeat;
margin-left: 145px;
margin-top: -22px;
}
</style>
<div class="arvore">
<div class="copa">
<ul>
<li id="ft1">foto1</li>
<li id="ft2">foto2</li>
<li id="ft3">foto3</li>
<li id="ft4">foto4</li>
<li id="ft5">foto5</li>
<li id="ft6">foto6</li>
<li id="ft7">foto7</li>
<li id="ft8">foto8</li>
</ul>
</div>
<div class="pessoa">pessoa
</div>
</div>
But in the link question, you can put the image map, that site makes the code you need.
Example:
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://i.stack.imgur.com/CLits.png"usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Missão e Visão" title="Missão e Visão" href="missao-e-visao" coords="332,90,355,83,411,78,455,93,478,116,473,140,460,162,434,173,393,182,354,170,324,154,311,131,313,117,313,103" shape="poly">
<area target="_blank" alt="Administrativa" title="Administrativa" href="administrativa" coords="276,175,326,191,351,218,340,245,310,270,258,277,211,265,186,240,188,203,228,181" shape="poly">
<area target="_blank" alt="Gestores" title="Gestores" href="gestores" coords="137,299,181,287,240,293,269,318,275,337,261,362,219,384,166,381,126,363,113,332" shape="poly">
<area target="_blank" alt="Negócio" title="Negócio" href="negocio" coords="124,410,169,400,210,407,243,427,251,458,235,478,207,496,171,502,119,490,95,467,88,445,103,421" shape="poly">
<area target="_blank" alt="Técnica" title="Técnica" href="tecnica" coords="393,291,445,302,473,332,467,363,430,385,382,391,321,372,306,332,337,301,362,293" shape="poly">
<area target="_blank" alt="Tecnologia" title="Tecnologia" href="tecnologia" coords="525,176,576,190,601,226,586,256,550,272,498,273,447,255,437,221,461,190,491,179" shape="poly">
<area target="_blank" alt="Societária" title="Societária" href="societaria" coords="593,286,643,294,671,321,668,354,635,380,573,382,527,366,511,337,525,309,554,289" shape="poly">
<area target="_blank" alt="Comportamento" title="Comportamento" href="comportamento" coords="617,400,663,405,693,430,699,459,678,485,631,502,572,491,541,474,537,437,569,405" shape="poly">
</map>