Überlappende Elemente mit OnMouseOver erfassen
DaddyD
- javascript
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
Hallo DaddyD,
ich vermute mal, es handelt sich bei deinen übereinanderlappenden Flaggen um teiltransparente GIFs. Warum integrierst du deine Flaggen mit einem Bildbearbeitumngsprogramm nicht einfach in die Weltkarte und definierst dazu eine Imagemap mit Polygonen, die sich nicht mehr überlappen?
Wenn du es mit Bildbearbeitung nicht so hast, dann bleibe halt bei deiner jetzigen Layer-Lösung und lege noch einen zusätzlichen Layer drüber mit einem transparenten Blind-GIF und einer zugeordneten polygonal definierten Imagemap.
Gruß Gernot
Hallo Gernot,
danke für die schnelle Antwort.
Die Kordinaten der Flaggen werden aus einer Datenbank gelesen und dann wir die Flagge mit CSS gesetzt.
Das mit den Image-Maps ist aber auch ein Ansatz, den ich mal überdenken werde.
Vielen Dank,
DaddyD