Objekte langsam einblenden

Leider führt der hier vorgestellte Code nur bei Internet-Explorern zur gewünschten Effekt. Wer diesen begutachten will, muss mal den IE aufrufen und die Distritks-Startseite rufen. Das Foto vom DV müsste langsam einblenden wenn JavaScript im Browser aktiviert ist. Sonst passiert auch hier nichts.

Der Code muss in einer HTML-Seite eingebaut werden.


____________________________________________

So sieht er aus - Erläuterungen weiter unten:

 

<!-- Punkt (1)-->

<img src="uploads/pics/v_df3ux.jpg" Titel="Distriktsvorsitzender"  align="right" id='meinBlock' style='FILTER: Alpha(Opacity=0); left:5px; top:-150px; position:relative; height:111px;  z-index: 3;'>

<script language="javascript">
<!--

// Punkt (2)
var IE4 = (document.all) ? true : false    ;
var NS4 = (document.layers) ? true : false;
var MOZ = (document.getElementById) ? true : false;

if ((!IE4)||(MOZ)) { IE4 = true;  };

// werte neu einstellen und timer starten
xi = 0;
xmax = 55;  // Bild bleibt halb durchsichtig - maximum wäre 100
// FILTER: wirkt nur bei und ab IE 4.x - andere Browser ignorieren dies.
function Texteinblenden()
{
  document.all.meinBlock.style.filter = "Alpha(Opacity="+xi+")";

  // Sichtbarkeitswert wird langsam hochgezählt
  xi = xi + 1;

  // wenn der festgelegte maximalwert erreicht ist wird der Timer gestoppt
  if (xi>xmax)
     { window.clearInterval(Taktiv);
     }

}

      // Intervall starten, Funktionsnamen mitgeben der alle 180 millisek gerufen werden soll.  Der Rückgabewert "Taktiv" wird benötigt für das Abschalten.
       if (IE4) Taktiv = window.setInterval("Texteinblenden()",180);

// end hiding -->
</script>

_______________________________________________

Zeilen mit // beginnend sind nur Bemerkungen im Javascript-Code.

Ausserhalb von JS ist HTML wo Bemerkungen mit <!-- und --> begrenzt werden müssen.

Fangen wir an:

Punkt (1)

Hier wird das Bild angezeigt. Dabei wird im CSS-Style unter "FILTER: Alpha(Opacity=0);" das Bild unsichtbar gemacht. Schraubt man den Wert "0" höher bis 100 wird das Bild in Stufen sichtbarer. Eine timergesteuerte Routine setzt diesen Wert des Bildes höher. Mit "top:-150px;" wird das Bild, was ja eigentlich unter dem letzten Artikel hängt wieder höher gesetzt. Wichtig: px nicht vergessen. Mozilla nimmt keine Angaben ohne Wertebezeichnung.

Punkt (2)

Hier wird festgestellt, welcher Browser benutzt wird. Hier eigentlich nicht notwendig, weil andere Browser den Filter nicht kennen und sowieso ignorieren.

Weiter Erklärungen sind den entsprechenden Stellen zu finden.