yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Bild ein- und ausblenden



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 (8244x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Ich weiß nicht genau ob das mit JS auch geht (kenne mich damit nicht so gut aus) aber bei CSS kann man auch für Mozilla einen solchen Effekt erzielen!
filter:alpha(opacity=80); <-- für IE
-moz-opacity:80%; <-- für Mozilla
für 80% sichtbarkeit!
Ich hoffe das hilft dieses Script zu eweitern!
mfg Timonator
Geschrieben von Timonator
Dieb!
Das hast du aus meiner CSS Datei :P
und ich war auch noch so blöd dir zu sagen, wo du das findesz XD
Geschrieben von michi
Öhm... Nein, das habe ich nicht von dir, sorry ;)
Geschrieben von Phil Marx