---ROCK FAIRY---	X
Ich bin ein "Draggable Layer! Zieh mich rum! Hier könnte dein Text stehen! Sogar Bilder können hier hin: Ihr könnt das Fenster so groß machen wie ihr wollt, also seid kreativ ;)

Draggable Layer

show xxx hide

Um so ein tolles Dings zu bekommen, kopiert den oberen Text in euren head-Bereich, den unteren in euren body-Bereich, aber nur direkt nach oder vor !! Im 2. Teil könnt ihr Hintergrundfarbe, das X zum Schließen, die Schrift etc. verändern.

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

</script>

<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
<table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
  <tr>
  <td id="titleBar" style="cursor:move" width="100%">
  <ilayer width="100%" onSelectStart="return false">
  <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <font face="Arial" color="#FFFFFF">Layer Title</font>
  </layer>
  </ilayer>
  </td>
  <td style="cursor:hand" valign="top">
  <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
  </td>
  </tr>
  <tr>
  <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

This is where your content goes.<br>
It can be any html code or text.<br>
Remember to feed the reindeer.<br>
Avoid chewable giblet curtains.

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

Und dieser Teil ist optional, falls ihr den Usern anbieten wollt, das Fenster per Link zu öffnen oder zu schließen:

< back