bilder tauschen

[Foos]

hey,
in letzter Zeit sehe ich öfter auf Seiten, Bilder, die sich automatisch tauschen, bzw wechseln, aber keine gif-animationen sind.
ist das css?

zum beispiel hier:

Nach was muss ich da suchen, wenn ich etwas ähnliches haben will ?

 

[pain2000]

AW: bilder tauschen

...guckst du hier.
Hab ich mal schnell aus dem Quelltext der Seite rausgelesen...
Da kommt zumindest die Funktion her, die auf dieser Seite verwendet wird...
Benötigt werden da, soweit ich das richtig sehe, zwei Dateien
und

 

[Foos]

AW: bilder tauschen

gibt es noch ne alternative die bilder tauschen zu lassen?

 

[lucy_lawless]

AW: bilder tauschen

gibt es noch ne alternative die bilder tauschen zu lassen?

flash geht auch

 

[azraelb]

AW: bilder tauschen

Ich würde dir für deine Seite ein CMS wie Joomla vorschlagen (dafür gibt es einen Haufen derartiger Plugins):

Einfach Bilderbuch-Plugin runterladen installieren und mit geringem Programmieraufwand anpassen.


Natürlich kannst du sowas auch mit einigen Sprachen selbst schreiben oder ein heruntergeladenes Plugin selbst in dein Projekt einbinden, dann benötigst du aber mehr als Grundkenntnise der Sprache, in der dein Plugin geschrieben wurde.

 

[Foos]

AW: bilder tauschen

also ich hab mich jetzt mal an diesen slidern versucht!
coda slider zum beispiel.
rechts ist ein kleiner pfeil zum beispiel und durck klick schiebt sich das bild dann um eins weiter.
versteht ihr mich?
aber irgendwie bekomm ich das nich in meine seite integriert. entweder es funktioniert dann nicht richtig oder mein ganzes sitedesign wird über den haufen geworfen!

kennt jemand solche scripte, die vielleicht mit erklärung geschrieben sind oder ähnliches ?

 

[azraelb]

AW: bilder tauschen

Hmm, wenn es funktioniert, aber "nur" das Layout zerschossen wird, dann ist das doch schon die halbe Miete...

Nun müssen nur noch die Eigenschaften angepasst werden:

- Schau mal nach, ob deine Bilder vielleicht zu groß sind und nicht angepasst werden
- Werden dort wo du das Script einbindest vielleicht irgendwelche margin oder padding-Befehle benutzt, die du nicht bedacht hast?
- ...

Es gibt viele Möglichkeiten, ein wenig Code würde vielleicht helfen


Und Scripte mit Erklärung.. hmm habe ich noch nicht viele gefunden, wenn du Glück hast sind ein paar Kommentare mit drinnen.
Aber ich glaube mich erinnern zu können, dass die Joomla-Plugins manchmal recht gut erklärt waren bzw. sogar ne GUI angeboten haben um Einstellungen zu machen.

 

[Emporia]

AW: bilder tauschen

Wenn du nicht zu viele Bilder tauschen willst (wegen der Endgröße), dann kommst du im Flash auch ohne Programmierung aus, wenn das Programmieren der Haken ist . Und da findest du auf jeden Fall einige Erklärungen im Netz. Im Wesentlichen stellst du die Fotos "nur" in bestimmten Abständen auf die Zeitleiste ...

 

[VirTuZ]

AW: bilder tauschen

hey foos,

die o.g. "slideshow" ist mithilfe von grafik-filtern mit CSS gemacht, wie du vermutet hast.
soweit ich weiß, stehen diese filter aber nicht allen browsern zur verfügung. IE macht da keine probleme, aber die umsetzung in anderen ist z.t. nicht wie es soll.
diese filter wurden dann mit nem java-script angewendet, damit sie wechseln.
hier mal ne übersicht über die verfügbaren filter mit CSS:
SELFHTML: Stylesheets / CSS-Eigenschaften / Filter (nur Microsoft)

viel erfolg noch ;-)
greetz

 

[azraelb]

AW: bilder tauschen

Hallo, also ich glaube nicht, dass das in dem Fall mit Filtern gemacht wird. Soviel habe ich bisher rausgefunden:

Das ist der code von dem Wechselnden Bild:

<img alt=" Image1" src="http://www.psd-tutorials.de/modules/Forum/images/core/img-01.jpg" style="position: absolute; display: block; z-index: 3; opacity: 1;"/>
<img alt=" Image2" src="http://www.psd-tutorials.de/modules/Forum/images/core/img-02.jpg" style="position: absolute; display: none; z-index: 2; opacity: 0;"/>
<img alt=" Image3" src="http://www.psd-tutorials.de/modules/Forum/images/core/img-03.jpg" style="position: absolute; display: none; z-index: 1; opacity: 0;"/>

mit css:

element.style {
display:none;
opacity:0;
position:absolute;
z-index:2;

Und zwar ist das so, dass irgendein Script eines der bilder display:block schaltet und die beiden anderen mit display:none ausblendet. Das wechselt dann immer der reihe nach.

der z-index wechselt auch immer, so dass ein Bild in den Vordergrund kommt, die anderen in den Hintergrund

indem opacity: dynamisch von 0.00000001 auf 1 und umgekehrt fällt/bzw. steigt, bildet sich der ausblendeffekt.


Das kann man sehr schön mit firebug beobachten.

und da opacity: imho kein filter ist, gehts auch im IE...

 

[VirTuZ]

AW: bilder tauschen

ok... hast recht...
hätte vllt. mal nen rechten blick in source wagen sollen...
hab nur mal irgendwann was in der art selbst programmiert und das damals mit filtern realisiert; war eigentlich ein ganz schöner effekt... nur halt beschränkt auf MS IE
egal...
danke für den hinweis, bzw. richtigstellung ;-)

 

[sokie]

AW: bilder tauschen

element.style {
display:none;
opacity:0;
position:absolute;
z-index:2;

opacity als style funktioniert im IE gar nicht.