chromax: Dynamisches Bild Popup läuft nicht...

Hallo,

ich habe von der Seite www.the-underdogs.info ein dynamisches Bild Popup Script "geklaut"  ;-)

Hier kann man es sehen:  http://www.the-underdogs.info/theme.php?id=3
(auf einen Link fahren und warten)

Jedenfalls läuft es zwar, aber nicht so stabil wie auf der Originalseite. Man muss den Mauszeiger sehr ruhig halten da es bei jeder Mausbewegung neu aufgebaut wird und es zu einer Fummelei wird das Bild zu sehen.

Das Ding:  http://www.chromax.de/chxNET5/test.htm

Zudem läufts nicht unter Firefox, weshalb ich auch ein anderes Script verwenden würde.

Habe bereits das Netz durchforstet und magere Beute gemacht. Nur mit extra .js Dateien und extra config files usw.
Ich wollte das so wie hier lösen, mit einem einfachen Script.

Jemand eine Idee wie man es "ruhiger" bekommt oder kennt jemand ein ähnliches, besseres Script?

Danke im Vorraus

  1. ich habe von der Seite www.the-underdogs.info ein dynamisches Bild Popup Script "geklaut"  ;-)

    Das nennt sich Tooltip.

    Zudem läufts nicht unter Firefox

    völlig unötigerweise.

    Jemand eine Idee wie man es "ruhiger" bekommt oder kennt jemand ein ähnliches, besseres Script?

    alles als das hier ist ein besseres Skript. Ich hab noch keinen Code gesehen, der mehr Fehler auf weniger Teilen enthält.

    Schon das Grundgerüst des HTML Codes ist falsch.
    Wie du die Eventeigenschaften der verschiedenen Browsern abfragst steht in selfhtml oder aber auch hier (u. ff.)
    Elemente einfügen http://de.selfhtml.org/javascript/objekte/node.htm#append_child

    und wenn du das alles gelesen hast, kann dein Skript ungefähr so aussehen:

      
    <script type="text/javascript">  
    function tooltip(e, text)  
    {  
        if(!e) e = window.event;  
        var o = document.getElementById('tt');  
        if(o && o.style.display != 'none') return;  
      
      
        var targ;  
        if (e.target) targ = e.target;  
        else if (e.srcElement) targ = e.srcElement;  
        if (targ.nodeType == 3) targ = targ.parentNode;  
      
        targ.onmouseout = function() { o.style.display = 'none';}  
      
        var o = document.getElementById('tt');  
        if(!o)  
        {  
           o = document.createElement('div');  
           o.id = 'tt';  
           o.style.position = 'absolute';  
           o.style.border = '1px solid black';  
           document.body.appendChild( o ) ;  
        }  
      
        if (e.clientX || e.clientY)  
        {  
            posx = e.clientX;  
            posy = e.clientY;  
            if (typeof(document.body.scrollLeft) != 'undefined')  
            {  
                posx += document.body.scrollLeft;  
                posy += document.body.scrollTop;  
            }  
        }  
        o.innerHTML = text;  
        o.style.top = ++posy + 'px';  
        o.style.left = ++posx + 'px';  
        o.style.display = '';  
      
    }  
    </script>  
    
    

    Der HTML Code sieht dann so aus:
    <a onmouseover="tooltip(event, '<img src='goldenboy.jpg'>')"
    href="xyz.html"><img src="anime1.jpg"></a>

    (onmouseout brauchst du nicht mehr)

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Danke, es funktioniert!

      Sorry, aber Javascript-mässig bin ich der Amateur.

      Es wäre vielleicht nicht dumm dieses Script in SelfHTML mit aufzunehmen, als Beispiel für Tooltipps. Denn diese Scripte werden immer beliebter und im Zeitalter der Popup-Blocker ist es schon ne gute Alternative.

      1. Es wäre vielleicht nicht dumm dieses Script in SelfHTML mit aufzunehmen, als Beispiel für Tooltipps. Denn diese Scripte werden immer beliebter und im Zeitalter der Popup-Blocker ist es schon ne gute Alternative.

        wieso? Die gibt es wie Sand am Meer. selfhtml möchte dir die Technik nahe bringen und keine fertigen Skripte verteilen, die findest du woanders.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
  2. Und von einer ähnlichen Lösung mit CSS ohne JavaScript hällst Du nichts?

    Vonwegen discplay:none, backgroundimage usw...