nicht angemeldet
Bilder per fade wechseln
Hallo Ihr alle,
ich habe einige Bilder, die ich hinterinander (an der gleichen position) darstellen möchte. Am besten stelle ich mir das ganz mit einem Fade-In und Fade-out vor.
Wie bzw. womit kann ich das realisieren?
Kann man das mit PHP machen? (kenne mich nur da einigermaßen aus)
Vielen Dank für Eure Meinungen und Tipps
Gruß Mario
-
Kann man das mit PHP machen?
Nein
(kenne mich nur da einigermaßen aus)
Ofensichtlich nicht, denn sonst wüsstest du, PHP läuft serverseitig und du willst etwas clientseitig realisieren.
-
Hallo,
ich habe einige Bilder, die ich hinterinander (an der gleichen position) darstellen möchte. Am besten stelle ich mir das ganz mit einem Fade-In und Fade-out vor.
Wie bzw. womit kann ich das realisieren?SELFHTML aktuell, Fader-Framework.
Freundliche Grüße
Vinzenz
-
Hallo Vizent,
Vielen Dank für Deinen Link.
Soweit ich nur zwei Bilder auf der gesamten Seite nutze, bekomme ich das sogar hin. Wenn ich das aber nun in meine Seite einbauen will (wo schon einige Bilder vorhanden sind) funzt das ganze nicht mehr.
Obwohl ich andere Bilder-Pfade und Bildnamen habe.
Folgend mal ein einfaches Beispiel:
[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Fade-Test</title>
<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>
<table style="width:100%;" border="1"><tr>
<td colspan="2" align="center"><img src="gfx/logo.jpg"></td>
</tr><tr>
<td>Zelle 1</td>
<td>Zell 2</td>
</tr><tr>
<td colspan="2" align="center">
<p style="position:relative;">
<img src="gfx/fade/bild1.jpg" alt="bild1">
<img src="gfx/fade/bild2.jpg" alt="bild2" style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
</p>
<p><a href="javascript:fade()">überblenden</a></p>
</td>
</tr></table>
</body>
</html>
]
Wenn man das <img src="gfx/logo.jpg"> entfernt klappt alles super.
Mit dem klappt - fadet das erste Bild immer sich selbst.Hast´e da noch ne Idee?
GRuß Mario
-
ich denk mal man muss da was an der Zeile
[...
var imgs = document.getElementsByTagName("img");
....]
ändern.Das sagt ja aus, dass er ALLE "img-Tags entsprechend behandeln soll.
Soll er aber ja garnicht. Also müsste man das irgendwie über ne ID oder class laufen lassen (denek ich mal). Ich habe nur leider keine Ahnung wie man das schlumpfen kann.
Wäre also wirklich nett, wenn sich mir da nochmal jemand annehmen könnte.DANKE
-
Moin!
ich denk mal man muss da was an der Zeile
[...
var imgs = document.getElementsByTagName("img");
....]
ändern.Das sagt ja aus, dass er ALLE "img-Tags entsprechend behandeln soll.
Soll er aber ja garnicht. Also müsste man das irgendwie über ne ID oder class laufen lassen (denek ich mal). Ich habe nur leider keine Ahnung wie man das schlumpfen kann.Das ist im Artikel ausführlich erklärt. Lies mal bis zum Ende.
- Sven Rautenberg
--
"Love your nation - respect the others."
-
-
-