nicht angemeldet
Website-Thumbs als Preview mit Textbeschreibung
Hallo, ich benutze folgendes Script, welches mir ein Website-Thumb als kleines Preview Bildchen in einem aufgeklappten div-Element (Blubberblase) ausgibt.
Jetzt möchte ich das Script ändern, damit ich ein bisschen Text unter das Vorschaubild schreiben kann.
Ich habe erstmal webnsapr.inz definert, welches per
webSnapr.inz = document.createElement('div');
webSnapr.inz.id = "Absatz";
ein neues div-Element einfügt. Dies funktioniert bis hierhin wunderbar.
Jetzt möchte ich aber später im Code Text in dieses div-Element einfügen, nur scheiterts da. Die Blase klappt einfach nicht mehr auf.
Habs mit folgendem probiert:
var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("Absatz").replaceChild(Textknoten, document.getElementById("Absatz"));
Schon hier und da alles getestet, aber sobald ich diese Passagen einfüge erscheint die Blase überhaupt nicht mehr.
Weiß nun wirklich nicht mehr weiter, hoffe hier kann mir jemand helfen.
Hier ist der Code, wenn auch ein bisschen lang, hoffe, dass es nicht zu umständlich ist.
var webSnapr = {
x:0,
y:0,
obj:{},
img:null,
lnk:null,
timer:null,
opacityTimer:null,
errorTimer:null,
hidden:true,
linkPool: {},
baseURI: "websnapr/",
imageCache: [],
init: function() {
var lnks = document.getElementsByTagName('a');
var i = lnks.length || 0;
var cnt = 0;
while(i--) {
if(lnks[i].className && lnks[i].className.search(/liste/) != -1) {
webSnapr.addEvent(lnks[i], ["focus", "mouseover"], webSnapr.initThumb);
webSnapr.addEvent(lnks[i], ["blur", "mouseout"], webSnapr.hideThumb);
webSnapr.linkPool[lnks[i].href] = cnt++;
}
}
if(cnt) {
webSnapr.preloadImages();
webSnapr.obj = document.createElement('div');
webSnapr.ind = document.createElement('div');
webSnapr.ind.className= "imageLoaded";
webSnapr.img = document.createElement('img');
webSnapr.img.alt = "preview";
webSnapr.img.id = "fdImage";
webSnapr.inz = document.createElement('div');
webSnapr.inz.id = "Absatz";
webSnapr.addEvent(webSnapr.img, ["load"], webSnapr.imageLoaded);
webSnapr.addEvent(webSnapr.img, ["error"], webSnapr.imageError);
webSnapr.obj.id = "fdImageThumb";
webSnapr.obj.style.visibility = "hidden";
webSnapr.obj.style.top = "0";
webSnapr.obj.style.left = "0";
webSnapr.addEvent(webSnapr.img, ["mouseout"], webSnapr.hideThumb);
webSnapr.obj.appendChild(webSnapr.ind);
webSnapr.obj.appendChild(webSnapr.img);
webSnapr.obj.appendChild(webSnapr.inz);
webSnapr.addEvent(webSnapr.obj, ["mouseout"], webSnapr.hideThumb);
document.getElementsByTagName('body')[0].appendChild(webSnapr.obj);
}
},
preloadImages: function() {
var imgList = ["lt.png", "lb.png", "rt.png", "rb.png", "error.gif", "loading.gif"];
var imgObj = document.createElement('img');
for(var i = 0, img; img = imgList[i]; i++) {
webSnapr.imageCache[i] = imgObj.cloneNode(false);
webSnapr.imageCache[i].src = webSnapr.baseURI + img;
}
},
imageLoaded: function() {
if(webSnapr.errorTimer) clearTimeout(webSnapr.errorTimer);
if(!webSnapr.hidden) webSnapr.img.style.visibility = "visible";
webSnapr.ind.className= "imageLoaded";
webSnapr.ind.style.visibility = "hidden";
webSnapr.inz.style.visibility = "hidden";
},
imageError: function(e) {
if(webSnapr.errorTimer) clearTimeout(webSnapr.errorTimer);
webSnapr.ind.className= "imageError";
webSnapr.errorTimer = window.setTimeout("webSnapr.hideThumb()",2000);
},
initThumb: function(e) {
e = e || event;
webSnapr.lnk = this;
var positionClass = "left";
var heightIndent;
var indentX = 0;
var indentY = 0;
var trueBody = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
if(String(e.type).toLowerCase().search(/mouseover/) != -1) {
if (document.captureEvents) {
webSnapr.x = e.pageX;
webSnapr.y = e.pageY;
} else if ( window.event.clientX ) {
webSnapr.x = window.event.clientX+trueBody.scrollLeft;
webSnapr.y = window.event.clientY+trueBody.scrollTop;
}
indentX = 10;
heightIndent = parseInt(webSnapr.y-(webSnapr.obj.offsetHeight))+'px';
} else {
var obj = this;
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
curtop += this.offsetHeight;
webSnapr.x = curleft;
webSnapr.y = curtop;
heightIndent = parseInt(webSnapr.y-(webSnapr.obj.offsetHeight)-this.offsetHeight)+'px';
}
if ( parseInt(trueBody.clientWidth+trueBody.scrollLeft) < parseInt(webSnapr.obj.offsetWidth+webSnapr.x) + indentX) {
webSnapr.obj.style.left = parseInt(webSnapr.x-(webSnapr.obj.offsetWidth+indentX))+'px';
positionClass = "right";
} else {
webSnapr.obj.style.left = (webSnapr.x+indentX)+'px';
}
if ( parseInt(trueBody.clientHeight+trueBody.scrollTop) < parseInt(webSnapr.obj.offsetHeight+webSnapr.y) + indentY ) {
webSnapr.obj.style.top = heightIndent;
positionClass += "Top";
} else {
webSnapr.obj.style.top = (webSnapr.y + indentY)+'px';
positionClass += "Bottom";
}
webSnapr.obj.className = positionClass;
webSnapr.timer = window.setTimeout("webSnapr.showThumb()",005);
},
showThumb: function(e) {
webSnapr.hidden = false;
webSnapr.obj.style.visibility = webSnapr.ind.style.visibility = webSnapr.inz.style.visibility = 'visible';
webSnapr.obj.style.opacity = webSnapr.ind.style.opacity = webSnapr.inz.style.opacity = '0';
webSnapr.img.style.visibility = "hidden";
var addy = String(webSnapr.lnk.href);
webSnapr.errorTimer = window.setTimeout("webSnapr.imageError()",15000);
webSnapr.img.src = 'http://images.websnapr.com/?url='+ encodeURIComponent(addy)+'&rndm='+parseInt(webSnapr.linkPool[webSnapr.lnk.href]);
var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("Absatz").replaceChild(Textknoten, document.getElementById("Absatz"));
/*@cc_on@*/
/*@if(@_win32)
return;
/*@end@*/
webSnapr.fade(10);
},
hideThumb: function(e) {
// Don't mouseout if over the bubble
e = e || window.event;
// Check if mouse(over|out) are still within the same parent element
if(e.type == "mouseout") {
var elem = e.relatedTarget || e.toElement;
if(elem.id && elem.id.search("fdImage") != -1) return false;
}
webSnapr.hidden = true;
if(webSnapr.timer) clearTimeout(webSnapr.timer);
if(webSnapr.errorTimer) clearTimeout(webSnapr.errorTimer);
if(webSnapr.opacityTimer) clearTimeout(webSnapr.opacityTimer);
webSnapr.obj.style.visibility = 'hidden';
webSnapr.ind.style.visibility = 'hidden';
webSnapr.img.style.visibility = 'hidden';
webSnapr.inz.style.visibility = 'hidden';
webSnapr.ind.className= "imageLoaded";
},
fade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 90 ) {
webSnapr.obj.style.opacity = webSnapr.ind.style.opacity = webSnapr.inz.style.opacity = '.'+newOpac;
webSnapr.opacityTimer = window.setTimeout("webSnapr.fade('"+newOpac+"')",20);
} else {
webSnapr.obj.style.opacity = webSnapr.ind.style.opacity = webSnapr.inz.style.opacity = '1';
}
},
addEvent: function( obj, types, fn ) {
var type;
for(var i = 0; i < types.length; i++) {
type = types[i];
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else obj.addEventListener( type, fn, false );
}
}
}
webSnapr.addEvent(window, ['load'], webSnapr.init);
-
Hi,
Jetzt möchte ich aber später im Code Text in dieses div-Element einfügen, nur scheiterts da. Die Blase klappt einfach nicht mehr auf.
Vermutlich wird dein Script wegen eines Fehlers abgebrochen. Nimm dir die Firebug-Extension fuer den FireFox, und schau nach.
Habs mit folgendem probiert:
var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("Absatz").replaceChild(Textknoten, document.getElementById("Absatz"));Das' ja schon mal Kaese.
Du sagst, dass du einen Kindknoten ersetzen willst - und gibst dann als zu ersetzenden Kindknoten aber den Knoten an, auf dem du die Methode aufrufst. Das ist natuerlich etwas zu inzestuoes, um zu funktionieren.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Das' ja schon mal Kaese.
Du sagst, dass du einen Kindknoten ersetzen willst - und gibst dann als zu ersetzenden Kindknoten aber den Knoten an, auf dem du die Methode aufrufst. Das ist natuerlich etwas zu inzestuoes, um zu funktionieren.MfG ChrisB
Original aus selfhtml-Referenz!
-
Hi,
zitiere bitte vernuenftig!
Du sagst, dass du einen Kindknoten ersetzen willst - und gibst dann als zu ersetzenden Kindknoten aber den Knoten an, auf dem du die Methode aufrufst. Das ist natuerlich etwas zu inzestuoes, um zu funktionieren.
Original aus selfhtml-Referenz!
Quatsch keinen Unsinn.
Im Beispiel zu replaceChild wird ein Kindknoten des Knotens, auf dem die Methode aufgerufen wird, als zweiter Parameter uebergeben.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Ja, tatsächlich ging etwas anders, aber brauchst ja nicht gleich so pampig werden...
Jetzt gehen zwar die Blasen noch auf, aber der Text wird nicht eingefügt.
-
Hi,
Ja, tatsächlich ging etwas anders, aber brauchst ja nicht gleich so pampig werden...
Wenn ich dich explizit darauf hinweise, was an deinem Code fehlerhaft ist, und du mir dann mit "ist doch aber in SELFHTML genauso" kommst - das zeigt doch wohl, dass du nicht aufmerksam nachgelesen hast.
Jetzt gehen zwar die Blasen noch auf, aber der Text wird nicht eingefügt.
Aha - also funzt nich', hm?
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Ja, also ich versuchs nochmal genauer zu erklären.
Bei mouseover über einen Link geht eine Blase auf, die ein Vorschaubild zu der verlinkten Seite enthält.
Hier kann man sich ein ähnliches Script anschauen: http://lab.arc90.com/2006/07/link_thumbnail.php
Ich möchte jetzt das Script anpassen (laut Licence frei erlaubt), dass unter dem Bild noch ein paar Zusatzinformationen zu der Seite stehen, wie z.B. Werbebelastung, Übersichtlichkeit, etc...
Da die Blase quasi ein DIV-Element ist, welches ein IMG-Element enthält, habe ich mir gedacht, ich hänge einfach nochmal ein DIV-Element an, welches den Zusatztext enthält.
Einfach und schnell gemacht, aber denkste!Das 2. DIV-Element welches die Zusatzinformationen enthalten soll, habe ich so eingefügt:
webSnapr.inz = document.createElement('div'); webSnapr.inz.id = "Absatz";Später im Code, also bei Aufruf der entsprechenden Blase, soll dann der Text eingefügt werden.
Dies habe ich folgendermaßen probiert:var Textknoten = document.createTextNode("Du darfst!"); document.getElementById("Absatz").replaceChild(Textknoten, document.getElementById("Absatz").firstChild);Und irgendwie klappt das nicht. Das DIV-Element ist zwar da und hat auch die entsprechend zugewiesene ID, aber ich schaff es einfach nicht, dass ein Text in dieses Element eingefügt wird.
Über irgendwelche Ratschläge, Tips, Hinweise oder was auch immer wäre ich sehr dankbar!
Chris
-
Hi,
Das 2. DIV-Element welches die Zusatzinformationen enthalten soll, habe ich so eingefügt:
webSnapr.inz = document.createElement('div');
webSnapr.inz.id = "Absatz";
Damit hast du es erzeugt, aber noch nicht eingefuegt. > Später im Code, also bei Aufruf der entsprechenden Blase, soll dann der Text eingefügt werden. > Dies habe ich folgendermaßen probiert: > ~~~javascript var Textknoten = document.createTextNode("Du darfst!"); > document.getElementById("Absatz").replaceChild(Textknoten, document.getElementById("Absatz").firstChild);Und irgendwie klappt das nicht.
Lass bitte den "Funzt nich"-Bloedsinn.
Hast du jetzt endlich mal nach Fehlermeldungen geschaut? M.E. muesstest du bei deinem Code welche bekommen.Wo hast du denn dem Div-Element erst mal ein Kindelement gegeben, auf das du jetzt hier zuzugreifen versuchst?
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hat sich erledigt, habs mit innerhtml hinbekommen.
-
-
-
-
-
-
-