Antworten auf deine Fragen:
Neues Thema erstellen

bilder tauschen

Foos

Member

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

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:

azraelb

Noch nicht viel geschrieben

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

Member

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

Noch nicht viel geschrieben

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:rolleyes:


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

Nicht mehr ganz neu hier

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 ...
 
V

VirTuZ

Guest

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

Noch nicht viel geschrieben

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:

HTML:
<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:
Code:
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...
 
Zuletzt bearbeitet:
V

VirTuZ

Guest

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 ;-)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben