Bildvorschau per Mouseover im Firefox

[Marc Aemmer]

Tag,

habe eine auf meiner Page eine Zeilen-Auflistung verschiedener Personen. Wenn man über den Namen der Person fährt erscheint dort das Bild der jeweiligen Person. Das Problem ist nun dass Firefox nur einmal ein Bild anzeigt und dann nicht mehr funktioniert.

Hier der Code:

<script type="text/javascript">
function tooltip (id)
{
document.getElementById('output').innerHTML='<img src=' + id + ' />';
document.getElementById('output').style.top= window.event.y + "px";
document.getElementById('output').style.display = 'block';
}
function tooltipdown ()
{
  document.getElementById('output').style.display = "none";
}
</script>

///////////////////////////////////////////////////////////////

<div id=output style=position:absolute; display:none; ></div>
<a href="bla.php" onMouseOver=tooltip('PfadZumBild/asd.jpg'); onMouseOut=tooltipdown();>
Name der Person</a>

[Siechfred]

Hier der Code:

Sieht erstmal unverdächtig aus, bis auf die Tatsache, dass der Firefox window.event.x und .y nicht mag (http://de.selfhtml.org/javascript/objekte/event.htm#x_y).

document.getElementById('output').innerHTML='<img src=' + id + ' />';

XHTML? Falls ja, ist dieser Abschnitt nicht valide:

<div id=output style=position:absolute; display:none; ></div>
<a href="bla.php" onMouseOver=tooltip('PfadZumBild/asd.jpg'); onMouseOut=tooltipdown();>
Name der Person</a>

Attribute werden klein geschrieben, Werte müssen gequotet werden. Ich habe den Code mal getestet, er funktioniert grundsätzlich. Irgendwo muss also noch ein Fehler sein, poste mal einen Link zu einer Testseite.

Siechfred

[Gunnar Bittersmann]

Hello out there!

function tooltip (id)

Die Bezeichnung 'id' finde ich irreführend; es ist ja eher ein 'uri'.

document.getElementById('output').innerHTML='<img src=' + id + ' />';
document.getElementById('output').style.top= window.event.y + "px";
document.getElementById('output').style.display = 'block';

Warum lässt du dreimal im Elementbaum dasselbe Element suchen? Performanter dürfte es sein, die Referenz auf das Element in einer Variablen zu speichern:

var output = document.getElementById('output');  
output.innerHTML='<img src=' + id + ' />';  
output.style.top= window.event.y + "px";  
output.style.display = 'block';

Da du das öfter brauchst und auch in der Funktion tooltipdown(), besser noch als globale Variable, also außerhalb der Funktion tooltip().

<div id=output style=position:absolute; display:none; >

Da ist ein Fehler im HTML: Anführungszeichen fehlen. [HTML401 §3.2.2]

Außerdem solltest du CSS-Angaben nicht inline machen. [https://forum.selfhtml.org/?t=150376&m=977234]

See ya up the road,
Gunnar