Tooltip eingeblendet lassen

[Padarom]

Hallo,

ich versuche mich seit einiger Zeit ein wenig an AJAX, was mit meiner eigentlichen Idee auch funktioniert. Alle 3,5 Sekunden wird ein AJAX-Request durchgeführt, der in einer MySQL-Datenbank alle Einträge ausliest und sie auf die jeweilige Position auf der Karte setzt. Dazu werden einige Informationen in eine DIV geschrieben, die mit ihrer ID eindeutig der Position auf der Karte zugeordnet ist. Dieses div erhält direkt beim Erstellen das Style-Attribut visibility: hidden, sodass es nicht angezeigt wird.
Wenn ich nun über das jeweilige Symbol gehe, erscheint darüber das DIV an der richtigen Position (Visibility wird auf Visible gesetzt, beim Mouseout wieder auf Hidden). Da jedoch alle 3,5 Sekunden alle MySQL-Daten neu eingelesen werden und damit auch die divs "neu" erstellt werden (egal ob der Inhalt gleich ist, oder nicht), wird im Moment der Aktualisierung ihre Sichtbarkeit wieder auf versteckt gesetzt. Dann muss man wieder die Maus ein wenig bewegen, damit das onmouseover greift und die Box wieder visible ist.

Nun meine Frage: Kann ich diese Notwendigkeit des Mausbewegens auch entfernen? Später sollen die Abfragen etwa im Sekundentakt laufen, sodass die Positionen einigermaßen flüssig sind. Dann muss man jedoch selbstverständlich jede Sekunde seine Maus wieder bewegen.

Hier eine Livevorschau.
Ich hoffe mal, dass das verständlich genug erklärt war.

$query = "SELECT * FROM `active`";
$abfrage = mysql_query($query) or die("Fehlermeldung: ".mysql_error());
while( $ergebnis = mysql_fetch_object($abfrage))
{
  echo '<img src="inc/plane_icon.png" alt="plane"
    id="'.$ergebnis->Flugnummer.'" onmouseover="info(this.id, true)" onmouseout="info(this.id, false)" />';
  echo '<div style="position: absolute; visibility: hidden; class="info" id="'.$ergebnis->Flugnummer.'_info"></div>';
}

[COLOR=#4F76AC][FONT=Consolas]var[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]new[/FONT][/COLOR][COLOR=black][FONT=Consolas] XMLHttpRequest[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]();
[/FONT][/COLOR][COLOR=black][FONT=Consolas]setTimeout[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"updateMap()"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]5000[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]0[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=black][FONT=Consolas] updateMap[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]()[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=black][FONT=Consolas]  ajax.onreadystatechange [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]()[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]  if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]ajax.readyState [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]==[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]4[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]&&[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.status [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]==[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]200[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=black][FONT=Consolas]      document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"images"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].innerHTML [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.responseText[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]  }
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas] }
[/FONT][/COLOR][COLOR=black][FONT=Consolas]  ajax.open[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"get"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"inc/request.php"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]true[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=black][FONT=Consolas]  ajax.send[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]();
[/FONT][/COLOR][COLOR=black][FONT=Consolas]  setTimeout[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"updateMap()"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]5000[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]0[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]}
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=black][FONT=Consolas] info[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=black][FONT=Consolas] visible[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas] if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]visible [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]== [/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]true[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas] document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]+[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"_info"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].style.visibility [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]'visible'[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas] if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]visible [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]== [/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]false[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas] document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]+[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"_info"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].style.visibility [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]'hidden'[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]}[/FONT][/COLOR]

Den "unwichtigen" Teil habe ich gekürzt.
Ich hoffe jemand kann mir einen Tipp geben, wie ich meinen Code so ändern/verbessern kann, dass diese div nicht mehr versteckt wird.

Danke im Voraus.

Mit freundlichen Grüßen
Padarom

 

[Tronjer]

Nimm das Div doch aus dem Ajax-Request raus, schreibe es in das statische HTML und lade dann nur den Inhalt nach.

 

[Padarom]

Es kann ja eine unterschiedlich große Anzahl an Einträgen in der Datenbank geben, dementsprechend müssten auch mehr divs erzeugt werden.
Habe es jetzt jedoch dadurch gelöst, dass ich beim Mouseover das entsprechende Div-Element in eine Variable schreibe und dieses Element direkt nach dem AJAX-Request automatisch wieder auf visible gesetzt wird.
Bei onmouseout wird die Variable zurück auf null gesetzt. Dadurch funktioniert es bei mir einwandfrei :)

 

[Kizetsu]

Hi,
ich hab mir das grad mal angeschaut und wollte nur kurz anmerken, dass die verlinkte Vorschau bei mir (Firefox 17.0.1) auf meiner Testmaschine (Kubuntu) nicht funktioniert. Es wird ein Mal geladen und danach passiert nichts mehr. Laut Firebug Plugin kommen danach auch keine Datenbankabfragen mehr. Das sollte evtl. noch mal überprüft werden.

LG