nicht angemeldet
Lieber daniel4433221,
Guten Tag Hr. Felix Riesterer
warum so förmlich? Bist Du ein Schüler von mir (gewesen)?
danke für die Antowrt, hat mir sehr weitergeholfen! werde mich noch bzgl. inline-styles schlauer machen.
Es freut mich, dass ich Dir weiterhelfen konnte.
Im Nachhinein weiß ich nicht, ob meine Lösung semantisch nicht noch feiner sein könnte. Auch wenn das jetzt vielleicht eine Spitzfindigkeit ist, so stört es mich doch, ein <div>-Element einzusetzen, wenn es nur ein einziges Kindelement erhalten soll. Betrachte meine folgende Lösung also meinetwegen als übertriebene "reine Lehre", ignoriere sie aber bitte deswegen nicht ganz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>einfacher Fader</title>
<style type="text/css">
~~~~~~css
p.fader {
text-align:center;
}
p.fader span {
display: inline-block;
position: relative;
width: 600px;
}
~~~~~~html
</style>
<script type="text/javascript">
~~~~~~javascript
//<![CDATA[
function fade(step) {
var imgs = document.getElementsByTagName("img");
step = step || 0;
imgs[1].style.opacity = step/100;
imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fade(step); }, 1);
}
}
//]]>
~~~~~~html
</script>
</head>
<body>
<h1>Einfacher Fader</h1>
<p class="fader">
<span>
<img src="images/berge1.jpg" alt="" />
<img src="images/berge2.jpg" alt="" style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)" />
</span>
</p>
<p><a href="javascript:fade()">überblenden</a></p>
</body>
</html>
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)