Fading-Effekte für Text und Bild

Gelegentlich möchte man Textabschnitte oder Bilder mit einem Fading-Effekt ausstatten, ohne gleich schwergewichtete Multifunktionsbibliotheken zu bemühen. Ich habe zu diesem Thema 2 kurze JavaScript-Dateien herausgesucht.

jsfx_fade.js

Ich weiß nicht mehr, vorher ich diese Datei habe. Möglicherweise stammt sie von javascript-fx.com. Ich habe dort zumindest ähnliches gefunden. Dem Code nach zu urteilen handelt es sich um ein ziemlich altes Script. jsfx_fade ist dazu gedacht, Bilder zu überblenden. Zu jedem Bild muss eine normale und eine schwarz-weiß Version existieren. Bei mouseover wird dann an Stelle der Schwarz-Weiß-Version die Farbversion eingefadet.

Einbau

Für jedes BIld wird ein CSS-Abschnitt definiert:

#d1 { 
position: absolute; 
left: 115px; 
top: 125px; 
width: 268px; 
height: 542px; 
z-index:1; 
background-image:url('luna03sw.png'); 
background-repeat:no-repeat;
}

Dort wird als Hintergrundbild die Schwarz-Weiß-Version festgelegt.

In einem JavaScript-Abschnitt wird die Datei jsfx_fade.js eingebunden. Außerdem wird eine kleine Funktion up() definiert. Schließlich folgt ein Initialisierungsabschnitt.

<script type="text/javascript">
var zIndex = 100;

function up(what){
zIndex++;
what.style.zIndex = zIndex;
}
</script>
<script language="JavaScript" src="jsfx_fade.js" type="text/javascript"></script>
<script language="JavaScript">
JSFX.Ro("luna","luna03.png");
JSFX.Ro("rookie","rookie02.png");
JSFX.Ro("rush","rush03.png");
JSFX.Ro("tippy","tippy03.png");
</script>

Beispiele

Beispiel 1

Beispiel 2