Bild ein- und ausblenden


Mit diesem Script kann man Bilder leicht transparent in den Hintergrund legen und beim Überfahren mit der Maus langsam in den Vordergrund faden lassen.

Füge dafür in den
Code:
<head>...</head>
-Bereich folgenden Code:

Code:
<script language="JavaScript1.2" type="text/javascript">
function high(bild) {
das=bild;
anmachen=setInterval("fadeein(das)",10);
}

function low(bild) {
das=bild;
ausmachen=setInterval("fadeaus(das)",10);
}

function fadeein(bild) {
if (bild.filters.alpha.opacity<100) {
bild.filters.alpha.opacity+=5;
}
else if (window.anmachen) {
clearInterval(anmachen);
}
}

function fadeaus(bild) {
if (bild.filters.alpha.opacity>20) {
bild.filters.alpha.opacity-=5;
} else if (window.ausmachen) {
clearInterval(ausmachen);
}
}
</script>


Das Bild muss auch um einen kleinen Code erweitert werden:
Code:
style="filter:alpha(opacity=20)" onMouseover="high(this)" onMouseout="low(this)"


Wenn du alles richtig gemacht hast, dürfte also ein Bild in HTML in etwa so aussehen:
Code:
<img SRC="ich.jpg" BORDER="0" style="filter:alpha(opacity=20)" onMouseover="high(this)" onMouseout="low(this)">




Wir bedienen uns hier einem Filter, den Microsoft erfunden hat, und deswegen leider nur im Internet Explorer verfügar ist. Die anderen Browser können diesen Effekt leider nicht anzeigen.
Dieser Filter ist ein Alpha-Filter und ermöglicht es, das Element, auf dem er angewandt wird, transparent zu machen. In Klammern dahinter steht immer opacity, was frei übersetzt "Intensität" bedeutet. Die Zahl gibt die Sichtbarkeit des Bildes an: 0 heisst absolut transparent, 100 heisst voll sichtbar.
Summa summarum heisst das Style-Attribut im Bild also folgendes: Wende auf dieses Bild den Filter Alpha mit der Intensität von 20 (also zu 20% sichtbar) an.

Fährt man mit der Maus über das Bild, so wird alle 10/100 Sekunden (also jede zehntel Sekunde) die Intensität um 5 hochgesetzt, bis man die Intensität 100 (voll sichtbar) erreicht hat.
Verlässt die Maus das Bild, so wird wieder in zehntel Sekunden die Intensität um 5 herabgesetzt, bis man wieder den Ausgangswert von 20 erreicht hat.Geschrieben von Phil Marx am 18.06.2004 (6086x gelesen)
Diese News stammt von der Seite http://www.yubb.de
Sie ist unter http://www.yubb.de/artikel311.html direkt aufrufbar.

Jegliche Reproduktion dieser Seite oder ihrer Inhalte ist strengstens untersagt.