Tag zusammen,
habe in einem Forum nachfolgenden code gefunden,den ich gerne verwenden würde:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bild einblenden / ausblenden</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<img id="showhide" alt="" src="drr.jpg" style="widht:422px;height:372px;"><br>
<a href="javascript:hide_picture (document.getElementById ('showhide'))" title="">Bild ausblenden</a><br>
<a href="javascript:show_picture (document.getElementById ('showhide'))" title="">Bild einblenden</a><br>
<a href="javascript:fade_in_out ('showhide', -0.05)" title="">Bild schrittweise ausblenden</a><br>
<a href="javascript:fade_in_out ('showhide', 0.05)" title="">Bild schrittweise einblenden</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Bildobjekt über die Visibility-Eigenschaft des Style verstecken
function hide_picture (element) {
// Bild angegeben?
if (typeof element == 'object' && element.tagName == 'IMG')
// Style-Eigenschaft zum Ausblenden setzen
element.style.visibility = 'hidden';
}
// IMG-Element per Style sichtbar machen
function show_picture (element) {
// Handelt es sich um ein Bildelement?
if (typeof element == 'object' && element.tagName == 'IMG')
// Bildelement einblenden
element.style.visibility = 'visible';
}
// Funktion kann mit JavaScript Bilder schrittweise (animiert) ausblenden
// Die Element-ID des auszublendenden Elements wird als Zeichenkette angegeben.
// Der zweite Parameter gibt die Schrittweite an, mit der das Bild ein- oder
// ausgeblendet werden soll. Negative Werte blenden aus; Positive blenden ein
function fade_in_out (element_id, step=555) {
// Intervall noch nicht gestartet?
if (!this.proc) {
// Schrittweite muss positiv oder negativ sein, da
// sonst weder aus- noch eingeblendet wird.
if (step == 0) {
// Fehlermeldung und Beenden, wenn Schrittweite == 0
alert ('Schrittweite darf nicht 0 sein!');
return;
}
// Ansonsten kann die Animation gestartet werden.
this.proc = window.setInterval ('fade_in_out(\'' + element_id + '\', ' + step + ')', 50);
}
else {
// Wir befinden uns bereits in der Ein- Ausblendphase
var e = document.getElementById (element_id);
// Variable zur Speicherung der Transparenz des Elements
var opacity;
// Opera, Mozilla & Co. verwenden die Style-Eigenschaft opacity
if (!e.filters)
opacity = !e.style.opacity ? step > 0 ? 0 : 1 : parseFloat (e.style.opacity);
// Ansonsten wird der Alpha-Filter von IE verwendet
else
// Opacity wird beim IE in Prozent angegeben
opacity = !e.filters.alpha.opacity ? step > 0 ? 0 : 1 : parseFloat (e.filters.alpha.opacity) / 100;
// Zieltransparenz erreicht? (0, wenn ausgeblendet wird; 1, wenn eingeblendet wird)
if ((step < 0 && opacity != 0) ¦¦
(step > 0 && opacity != 1)) {
// Transparenz um Schrittweite anpassen
opacity += step;
// Beim setzen der neuen Transparenz wieder auf die verschiedenen Browser auchten!
if (!e.filters)
e.style.opacity = step < 0 ? opacity < 0 ? 0 : opacity : opacity > 1 ? 1 : opacity;
else
e.filters.alpha.opacity = step < 0 ? opacity < 0 ? 0 : opacity * 100 : opacity > 1 ? 100 : opacity * 100;
}
else {
// Endzustand (vollständig ein- bzw. ausgeblendet) erreicht!
// Prozess kann nun abgebrochen werden.
window.clearInterval (this.proc);
this.proc = null;
}
}
}
// -->
</script>
</head>
<body>
</body>
</html>Leider funktioniert das Ganze nicht wie gewünscht.
Das Bild wird angezeigt, aber danach weder auf einmal noch schrittweise ausgeblendet bzw. wieder eingeblendet.
Was mache ich falsch bzw. was muss ich ändern, wäre schön, wenn mir jemand helfen könnte. Besten Dank
