Shadow

Marcus Börger

 

Dieses Script läßt einen Text kreisen. Wahlweise um einen anderen herum.
Für Shadow sind drei Komponenten notwendig:
1. JavaScript im <head>-Abschnitt

Leider kann der aktuelle InternetExplorer 6 (6.0.2600) die absolute Position des <div> Elemtentes nicht bestimmen. Das liegt daran, daß hier keine absoluten Pixelpositionen für die beiden Elemente vorgenommen wurden. Daher wandert der Schatten auf dem Seitenbeginn. Eine Alternative wäre es mit der DOM Property document.defaultView zu arbeiten, doch diese wird vom Internet Explorer ebenfalls nicht untersützt.

Als Ausweg für den Internet Explorer bleibt die Position tatsächlich absolut anzugeben. 

<script type="text/javascript" language="JavaScript">
<!-- Fuer nicht JavaScript faehige Browser auskommentieren
// (c) M.Boerger: mailto:marcus.boerger@post.rwth-aachen.de
// See Copyright-Info at / Beachten Sie Copyright-Info in Seite
// http://www.marcus-boerger.de/js/DynamicJavaScript.html

var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all && document.body) ? 1 : 0;
var DOM = (document.getElementById) ? 1 : 0;
var DYN = NS4 | IE4 | DOM;

var direction  = -1;

function LayerShow( popName) {
  if (NS4) {
    document.layers[popName].visibility = "show";
  } else if ( DOM) {
    document.getElementById(popName).style.visibility = "visible";
  } else if ( IE4) {
    document.all[popName].style.visibility = "visible";
  }
}

function LayerGetX( popName) {
  if (NS4) {
    return document.layers[popName].left;
  } else if ( DOM) {
    return document.getElementById(popName).style.pixelLeft;
  } else if ( IE4) {
    return document.all[popName].style.pixelLeft;
  }
  return 0;
}

function LayerGetY( popName) {
  if (NS4) {
    return document.layers[popName].top;
  } else if ( DOM) {
    return document.getElementById(popName).style.pixelTop;
  } else if ( IE4) {
    return document.all[popName].style.pixelTop;
  }
  return 0;
}

function LayerMoveAbs( popName, x, y) {
  if (NS4) {
    if ( parseInt(x)==x) document.layers[popName].left = x;
    if ( parseInt(y)==y) document.layers[popName].top  = y;
  } else if ( DOM) {
    if ( parseInt(x)==x) document.getElementById(popName).style.pixelLeft = x;
    if ( parseInt(y)==y) document.getElementById(popName).style.pixelTop  = y;
  } else if ( IE4) {
    if ( parseInt(x)==x) document.all[popName].style.pixelLeft = x;
    if ( parseInt(y)==y) document.all[popName].style.pixelTop  = y;
  }
  return true;
}

function LayerMoveRel( popName, x, y) {
  return LayerMoveAbs( popName, LayerGetX( popName) + x, LayerGetY( popName) + y);
}

function MoveShadow(popName) {
  switch( direction++) {
    case 0:
      LayerMoveRel(popName,-4,0);
      break;
    case 1:
      LayerMoveRel(popName,0,-4);
      break;
    case 2:
      LayerMoveRel(popName,4,0);
      break;
    case 3:
      LayerMoveRel(popName,0,4);
    default:
      direction = 0;
      break;
  }
}

function Automation() {
  if ( NS4 || IE4 || DOM) {
    // ermittle zentrierte X-Position
    if ( NS4) {
      x = Math.max((document.width)/2-120,20);
      // NS4 kann die Breite eines Elementes nicht ermitteln: hier wurde manuell 120 ermittelt.
    } else if ( DOM) {
      x = (document.body.clientWidth - document.getElementById('ORIGIN').clientWidth)/2;
    } else if ( IE4) {
      x = (document.body.clientWidth - document.getElementById('ORIGIN').clientWidth)/2;
    }
    x = Math.round(x);
    LayerMoveAbs('ORIGIN',x,'')
    LayerMoveAbs('SHADOW',x,'');
    LayerMoveRel('SHADOW',2,2);
    LayerShow( 'SHADOW');
    window.setInterval( "MoveShadow('SHADOW');", 175);
  }
}
// -->
</script>
Die Zeile document.layers["SHADOW"].moveBy(2,2); muß ggf. angepaßt werden. Die Zeile darüber schneidet den Layer so klein, daß er rotieren kann. Dieses ist notwendig, wenn Shadow schon am Anfang der Seite benutzt werden soll und damit Teile hinter Shadow nicht überdeckt werden..
2. Sytelsheet im Header
<style type="text/css"><!--
.headr {
  color: #ff0000;
  font-weight: bold;
  font-size: 24pt;
}
.heady {
  color: #ffff00;
  font-weight: bold;
  font-size: 24pt;
}
// --></style>
Dieser Teil ist optional. Er wird hier verwendet, um die Schriftformatierung zu vereinfachen.
3. Integration von Shadow im <body>-Abschnitt
<div style="position:absolute; z-index:4; visibility:visible;" id="ORIGIN"><span class="headr">Marc</span><span class="heady">us Bö</span><span class="headr">rger</span></div>
<div style="position:absolute; z-index:5; visibility:hidden;"  id="SHADOW"><span class="headr">Marc</span><span class="heady">us Bö</span><span class="headr">rger</span></div>
4. Aufruf der Automation-Funktion bei Laden der Seite
<body onLoad="Automation();">
©M.Börger