Łączenie divóv z mapowaniem

Question

Witam,

Dzisiaj chciałam zakodować pewną grafikę, w której skład wchodzi kod HTML, a dokładnie rzecz biorąc divy, odpowiedzialne za ramki. Jednak w grafice użyłam opcji mapowania, która po kliknięciu w trzy konkretne miejsca przenosi do trzech różnych stron www. Mój problem polega na tym, że nie do końca wiem jak mogę połączyć mapowanie z divami by otrzymać upragniony efekt. Po moich próbach ramki wykonane w divach przesuwały się ponad grafikę, a ona sama była duplikowana . Zależy mi by efekt mapowania i divóv znalazł się na jednej grafice bez niezamierzonego przemieszczania ramek 
Kod divóv:

<div style="background-image:url(&quot;https://zapodaj.net/images/8900574f627b1.png&quot;);width:550px;height:700px;overflow:auto;margin-top:0px;margin-left:0px;">

<div style="width:260px;height:240px;overflow:auto;margin-top:170px;margin-left:260px;"><div style="text-align:center;"><font color="#582a08"><span style="font-family:georgia;"><font size="1;">TEKST</font></span></font></div></div></div>

<div style="width:260px;height:240px;overflow:auto;margin-top:-260px;margin-left:260px;"><div style="text-align:center;"><font color="#582a08"><span style="font-family:georgia;"><font size="1;">TEKST</font></span></font></div></div>

Kod mapy:
 

<img src="[Bez nazwy]" width="550" height="750" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Shayen -->
<area shape="circle" coords="190,567,22" href="www.wattpad.com/story/124565184-zaklinacz-s%C5%82%C3%B3w" />
<area shape="circle" coords="189,623,22" href="http://www.eldarya.pl/player/profile/Shayen" />
<area shape="circle" coords="189,678,22" href="http://www.slodkiflirt.pl/s2/profile/Khamira" />
</map>