XaraX: Probleme beim anzeigen von Bildern....

Beitrag lesen

Hallo,

prizipiell hättest Du die Möglichkeit es Dir relativ einfach zu machen und forlgendes zu notieren:

<a        href="links.html"
   onMouseover="this.innerHTML='<img src='0.png'>'"
    onMouseout="this.innerHTML='Privater Bereich'">Privater Bereich</a>

Leider registriert der Mozilla jede einzelne Bewegung innerhalb des Links mit dem Event onMouseout und sofort wieder mit dem Event onMouseover. Das führt bei mir zu einem Flackern des Bildes. Das kann natürlich nicht gewollt sein. Daher ist der Ansatz eine Funktion zu nutzen, m. E. schon der beste Weg.

Wenn Du Deine Funktion nicht für einen privaten Bereich, der nur Dir zugängig ist, nutzen willst, dann ist noch anzumerken, daß nicht jeder Browser das Ojekt "all" (also document.all) kennt. Das ist zum beispiel auch bei meinem Browser so (Mozilla).

Ich bitte auf die genaue Schreibweise zu achten (schlimm ist es gleube ich weniger, aber es ist nicht richtig):

<script type="text/Javascript">

<script type="text/javascript">

Wie oben benutze ich dabei "this" als Rekursion auf das eventauslösende Element <a>. Der Vorteil dabei ist, daß ich nicht über eine Methode (getElementById() getElementsByName() getElementsByTagName()) selektieren muß. Dadurch kann ich mir einiges erleichtern.

<a        href="links.html"
   onMouseover="mache_was1(this)"
    onMouseout="mache_was2(this)">Privater Bereich</a>

Dazu kann ich mir nun forgende Funktion erstellen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function mach_was1()
   {
   v=document.getElementById('link')
   v.onmouseover='';

// der Element <a id='link' ~> wird in einer Variablen gespei-
// chert und der Eventhandler wird gelöscht
// wer schon mal onMouseover="alert('ja')" ausgeführt hat, weiß
// wofür dies gut sein kann ;)

img=new Image();
   img.src='0.png';
   img.onmouseout=function(){mach_was2()};

// ich erzeuge ein neues Objekt "Image" und weise der Eigenschaft
// src einen URI zu als Referenz auf ein Bild
// damit das Bild beim Verlassen des links auch wieder umgewan-
// delt wird, übergebe ich dem Event onMouseover eine Funktion
// es wird dem Bild und nicht dem Link übergeben, da der Mozilla
// sonst wieder mit einem Flackern antworten würde

while(v.firstChild) v.removeChild(v.firstChild);

// die Bedingung für while() ist solange erfüllt, wie v (also
// das eventauslösende Element <a> noch irgentetwas an Inhalt hat
// removeChild() löscht diesen Inhalt

v.appendChild(img)

// nun wird das oben erzeute Objekt img als inneres Element von
// <a> eingehangen.

}
function mach_was2(v)
   {
   v=document.getElementById('link')
   v.onmouseover=function (){mach_was1(this)};

// man beachte die unterschiedliche Schreibweise v.onmouseout
// aber im hartkodiertem HTML <a onMouseout=''>

x=document.createTextNode('Privater Bereich');

// wieder wird ein Objekt erzeugt und den Rest kennt man schon ;)

while(v.firstChild) v.removeChild(v.firstChild);
   v.appendChild(x)
   }
</script>
</head>
<body>
<div><a id='link' href="links.html" onMouseover="mach_was1()">Privater Bereich</a></div>
</body>
</html>

Gruß aus Berlin!
eddi

--
Manchmal trifft es einen doch ganz unverhofft t86591:
> '..."Vorläufig abgebrochen" ist ungefähr so sinnvoll formuliert, wie "einstweilig erschossen" oder "temporär verbrannt"...'
Ich danke Sven für diese Erkenntnis - Gott, was habe ich gelacht ;)