[DragableInfobox]
 Dragable Infobox
Wenn Sie mit der Maus in den oberen Rahmen dieser Infobox "greifen", ist es möglich, sie nach Belieben zu verschieben. Auch Größe, Aussehen und Position lassen sich anpassen.
In die Box können Sie sowohl Grafiken als auch Links und Formulare einbinden.
Durch einen Klick in eines der oberen Icons wird die Box entweder zugeklappt oder geschlossen.

Die automatisch mit geladene Infobox ist cross-browser kompatibel und eignet sich hervorragend als Alternative zum Popup-Fenster. Sie befindet sich ausserhalb des normalen Textflusses. Man kann sie bewegen, auf- und zuklappen und schliessen.

[Code]

[zwischen <HEAD> und </HEAD>]

<script type="text/javascript">
<!--

var ie = document.all&&!window.opera?1:0;
var w3c = document.getElementById?1:0;
var ns4 = document.layers?1:0;
var dragable = false;
var box, foot;
var deltaX, deltaY;


function intro() { // Box definieren

box = (ie)?document.all.ibox:(w3c)?document.getElementById('ibox'):document['ibox'];
}


function reg() { // Events initialisieren

if(ie) { // Fuer IE 4+

document.onmouseup = new Function("dragable=false;");
box.onselectstart = new Function("return false;");
}
else if(w3c) { // Fuer Mozilla, Netscape 6+ und Opera
document.onmouseup = drop;
}
else if(ns4) { // Fuer Netscape 4

box.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
box.onmouseup = function() { box.releaseEvents(Event.MOUSEMOVE); }
}
dragable = true;
box.onmousedown = pos; // Fuer alle Browser
}


function pos(e) { // Mausposition berechnen

if(ie) {

deltaX = event.clientX - box.style.pixelLeft;
deltaY = event.clientY - box.style.pixelTop;
document.onmousemove = drag;
}
else if(w3c) {

deltaX = e.clientX - parseInt(box.style.left);
deltaY = e.clientY - parseInt(box.style.top);
document.onmousemove = drag;
}
else if(ns4) {

box.captureEvents(Event.MOUSEMOVE);
deltaX = e.pageX - box.left;
deltaY = e.pageY - box.top;
box.onmousemove = drag;
}
}


function drag(e) { // Box zur Mausposition verschieben

if(dragable == true) {

if(ie) {

box.style.pixelLeft= event.clientX - deltaX;
box.style.pixelTop = event.clientY - deltaY;
}
else if(w3c) {

box.style.left= (e.clientX - deltaX) + "px";
box.style.top = (e.clientY - deltaY) + "px";
}
else if(ns4) {
box.moveTo((e.pageX - deltaX), (e.pageY - deltaY));
}
}
return false;
}


function drop() { // Box ablegen

dragable = false;
document.onmousemove = null;
}


function hidefoot() { // Inhalt der Box auf- und zuklappen

foot = (ie)?document.all.cont.style:(w3c)?document.getElementById('cont').style:document['ibox'].document['cont'];

if((foot.visibility=="inherit")||(foot.visibility=="visible"))
foot.visibility = "hidden";

else
foot.visibility = "inherit";
}


function hidebox() { // Gesamte Box schliessen

if(ie||w3c)
box.style.visibility = "hidden";

else
box.visibility = "hidden";
}
//-->
</script>

[IN den <BODY> Tag]

onload="intro()"

[zwischen <BODY> und </BODY>]

<div id="ibox" style="position:absolute; visibility:visible; border:none; width:380px; left:180px; top:120px;">

<table cols="2" border="0" cellspacing="0" cellpadding="0" width="380">
<tr>
<td valign="middle" width="85%" height="31" bgcolor="#4682B4" style="cursor:move;" onmousedown="reg()">

<ilayer>
<layer width="100%" onmouseover="reg()" onmouseout="dragable=false;"><font face="Verdana" color="#FFFFFF"><b> Dragable Infobox</b></font></layer>
</ilayer></td>

<td align="center" bgcolor="#4682B4" nowrap>
<a href="#" onclick="hidefoot();return false;">
<img src="min.gif" width="21" height="21" border="0" title="Auf- Zuklappen"></a>
<a href="#" onclick="hidebox();return false;">
<img src="x.gif" width="21" height="21" border="0" title="Schließen"></a>

</td></tr>
</table>

<div id="cont" style="position:absolute; visibility:inherit; border:none; top:31px; width:380px;">

<table border="0" cellspacing="0" cellpadding="10" width="380">
<tr><td bgcolor="#F5DEB3">

Wenn Sie mit der Maus in den oberen Rahmen dieser Infobox "greifen", ist es möglich, sie nach Belieben zu verschieben. Auch Größe, Aussehen und Position lassen sich anpassen.<br>
In die Box können Sie sowohl Grafiken <img src="smiley.gif" width="15" height="15"> als auch <a href="#">Links</a> und Formulare einbinden.<br>
Durch einen Klick in eines der oberen Icons wird die Box entweder zugeklappt oder geschlossen.

</td></tr>
</table>

</div> </div>

[Autor]

??

[Download]

Kopieren Sie bitte den Code
Die Bilder:

Copyright © 1998- Nightfire Webworker Archiv Script No: 549