Überlappende Elemente mit OnMouseOver erfassen

[DaddyD]

Hallo,
ich habe eine Weltkarte, auf der ich mit CSS Flaggen positioniert habe. Manche Flaggen überlappen sich oder liegen übereinander.
Mit JavaScript möchte ich nun neben den Flaggen eine Beschreibung anzeigen lassen. Mein Problem ist nun, dass er logischer Weise immer nur die obere Flagge nimmt und dann das Feld dazu anzeigt. Wie bekomme ich es hin, dass entweder alle Flaggen ausgewählt werden und dann die Felder dazu angezeigt werden (Hier würden sich aber die Felder auch überlappen und wären unlesbar.) oder dass sich die Flaggen leicht auseinander bewegen, dass man dann jede einzeln auswählen kann.

Meine Flaggen:
<img src='img/flag.gif' id='cross$count_flag' onmouseover="javascript:show_infobox('name_div$count_flag');" onmouseout="javascript:hide_infobox('name_div$count_flag');" onclick="javascript:window.location.replace('editcontact.php?person_id=$idmd5');" style='position:relative; visibility:hidden; z-index:3;'>

Die Felder dazu:
<div id='name_div$count_flag' style="position:absolute; left:".$x."px; top:".$y."px; visibility:hidden; z-index:4; font-size: 12px; padding:3px; border:thin solid blue; background:$markcolor;"><b>$fullname</b><br>$daystogo_text</div>

Die Einbledfunktion:
function show_infobox(name) {
 document.getElementById(name).style.visibility = 'visible';
}
function hide_infobox(name) {
 document.getElementById(name).style.visibility = 'hidden';
}

Ich habe schon in in Skriptsammlungen gesucht, aber bin bisher nicht fündig geworden.

Vielen Dank