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>