nicht angemeldet
Hallo an die Runde ...
Für einen temporären Hinweis auf einer Startseite müsste ein Hinweis erfolgen, den ich über einen Fader etwas dynamischer erscheinen lassen möchte. Hierfür habe ich ein Java-Skript mit einem Bildwechsel gewählt.
Zum Starten des Skripts gibt es eine Subline, mit der die Information an der gleichen Stelle des vorherigen Bildes eingeblendet werden soll. Beide Bilder haben die gleiche Größe und sollen auf der Seite zentriert dargestellt werden. Die Subline befindet sind zentriert darunter.
Ich habe schon die unterschiedlichsten Parameter umgestellt. Aber es klappt einfach nicht, dass das zweite Bild auf der gleichen Position des ersten Bildes eingeblendet wird. Das zweite verrutscht mal nach links oder die Bilder erscheinen nebeneinander.
Ich vermute hier den Fehler in der Positionierung "relative" und "absolute", aber die verschiedenen Alternativen mit "margin-left" und "margin-right" oder verschiedene Prozentangaben haben mich auch nicht weitergebracht.
Hat jemand eine erlösende Idee?
<html><head><title>NEWS</title>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#d2d2d2; }
a:visited { text-decoration:none; font-weight:bold; color:#d2d2d2;}
a:hover { text-decoration:none; font-weight:bold; color:#000000; }
a:active { text-decoration:none; font-weight:bold; color:#d2d2d2; }
a:focus { text-decoration:none; font-weight:bold; color:#d2d2d2; }
</style>
<script type="text/javascript">
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);
}
}
</script>
</head><body>
<div align="center">
<p style="position:relative; top:50%; left:50 %">
<img src="images/logo.gif" alt="">
<img src="images/hinweis.gif" alt=""
style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
</p>
<p><a href="javascript:fade()">NEWS NEWS NEWS NEWS NEWS</a></p>
</div>
</body></html>
MudGuard