nicht angemeldet
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);