MichelM: ...das unbekannte Wesen

Beitrag lesen

Hallo Angy,
das wird etwas länger dauern, aber eigentlich ist der Code gar nicht so wild. Hier werden neue Elememte erzeugt, die wieder neue Elemente erzeugen.
Das ist sicherlich förderlich, wenn man seinen Code schützen will.
tooltip ist ein Objekt, das man sich in JavaScript selbst definieren kann. Diesem Objekt kann ich Variablen und Funktionen unterordnen.
Der Vorteil ist, das ich JavaScript-Programme schreiben kann, die ohne dazugehörigen HTML-Code funktioniert und sich leicht in bestehende websites einbauen lässt. Im Gegensatz zu globalen Varibalen besteht hier keine Verwechslungsgefahr bei gleichlautenden Variablen.
var g=100
var tooltip.g=false

Somit kann der tooltip-code nicht mit anderen codes kollidieren.

tooltip.t.setAttribute("id","tooltip"); liesse sich nur zum Verständnis auch so übersetzen:

document.write("<DIV id="tooltip" ></DIV>");

var tooltip=new Object();
tooltip.t=document.createElement("<DIV>");
tooltip.g=false;
tooltip.m=function(e); // entspricht function tooltipm(e) nur das innerhalb des Objektes geschieht.

Hat das Dir geholfen, den Code zu verstehen ?

Hallo, meine Lieben!

Nach langem passiv-dabeisein hier mein erster Auftritt - und dann auch gleich noch mit einer Frage :-(. Ich hoffe, ich stelle mich jetzt nicht zu blöd an.

Stefan Becker hat gestern in einer Antwort auf die Adresse http://one.idontsmoke.co.uk/x/tooltip verwiesen und die darin verwendete Technik vollkommen zu recht als genial bezeichnet. Das Problem: ich dachte zwar, ich kann JS, aber, was da so abläuft an JS-Syntax, das habe ich noch nirgendwo gesehen. Vielleicht ist ja jemand von Euch bereit, einen klärenden Spruch zu hinterlassen.

Damit Ihr nicht rumsuchen müsst, kopiere ich einen relevanten Ausschnitt aus dem Dokument.

Würd mich freuen, was von Euch zu hören und wünsch Euch noch weiter dicke Ostereier!

Angy

...
window.onload = function(e) {
  if(document.createElement) tooltip.d();
}

tooltip = {

t: document.createElement("div"),
  c: null,
  g: false,

m: function(e) {
    if(tooltip.g) {
      x = window.event ? event.clientX + document.body.scrollLeft : e.pageX;
      y = window.event ? event.clientY + document.body.scrollTop  : e.pageY;
      tooltip.a(x,y);
    }
  },

d: function() {
    tooltip.t.setAttribute("id","tooltip");
    document.body.appendChild(tooltip.t);
    a = (document.all) ? document.all : document.getElementsByTagName("*");
    for(var i=0; i<a.length; i++) {
      if(a[i].getAttribute("title")) {
        a[i].setAttribute("text",a[i].getAttribute("title"));
        a[i].removeAttribute("title");
        if(a[i].getAttribute("alt") && a[i].complete) a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      } else if(a[i].getAttribute("alt") && a[i].complete) {
        a[i].setAttribute("text",a[i].getAttribute("alt"));
        a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      }
    }
    document.onmousemove = tooltip.m;
  },

s: function(e) {
    d = (window.event) ? window.event.srcElement : e.currentTarget;
    tooltip.t.appendChild(document.createTextNode(d.getAttribute("text")));
    tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';",500);
    tooltip.g = true;
  },

usw. usw.