Bilder im Wechsel

Webdesign & Technik HTML & CSS
1

Hi ich wollte längs bunner auf meiner Hp setzen.

Nehmen wir an es sind 5 Bilder.
Die Bilder sollen Automatisch ins nächste übergehen.

Also:
Bild1.gif
Bild2 …
Bild5…
wieder Bild 1

kann mir jemand helfen?
Bilder können 3 sek. angezeigt werden bis sie ins nächste wechseln?

Danke schon mal im vorraus?

2

Ich weiß zwar nicht was ‘bunner’ sind und wozu die längs gehen
sollen, aber bei dem Rest handelt es sich um eine klassiche
Anwendung von Animationen oder Videos.

Wenn das jetzt auch ein plötzliches Überblenden sein darf,
kannst du ja weiter GIF verwenden, bei dem Format kann man
mehrere Bilder hintereinander anzeigen lassen und auch noch
die Zeit einstellen, wie lange ein Bild gezeigt werden soll.
Dies kann vermutlich von den meisten browsern ohne weitere
Hilfsmittel angezeigt werden.

Mit SVG kann man auch kontinuierliche Überblendungen
animieren, wobei man dann einfach die Eigenschaft 'opacity’
jedes Bild zur gegebener Zeit in gewünschtem Zeitablauf
ändern läßt. Das SVG-Dokument an sich mit der eigentlichen
Animation wird vermutlich kleiner sein als eines der GIF-Bilder
(besser man verwendet zu dem Zwecke PNG übrigens).
Die Bilder an sich werden ähnlich wie bei HTML einzeln angegeben
und einzeln geladen.

Dann könnte man auch ein Videoformat verwenden, wie MPEG,
AVI, Quicktime etc, auch mit flash wird es gehen, erfordert aber
alles mehr Aufwand, als die ersteren beiden Methoden oder
zumindest speziellere Programme, die nicht immer verfügbar
sind.

GIF-Animation kann man etwa mit dem Gimp basteln,
SVG-Animationen mit jedem Texteditor.

3

Sorry meinte banner.
Und die banner sind längs.

und ich wollte es mit html einbinden.
Habe gehofft das mir jemand ein html script hir schreiben kann?

4

Einbinden kannst du das Resultat der beschriebenen Aktionen
immer mit HTML, bei GIF mit dem Element img, sonst oder auch
bei GIF mit dem dem Element object.

HTML allein kannst du nicht verwenden, um etwas zu animieren,
dazu ist das nicht gedacht, es handelt sich ja um eine
Textbeschreibungssprache. Eine Sprache zur Beschreibung von
Animationen ist SMIL, SVG wie oben beschrieben verwendet
eben diesen internationalen Standard.
Zwar kann man auch SMIL+XHTML+CSS versuchen, wird
erfahrungsgemäß von aktuellen browsern aber noch nicht
interpretiert.

Man könnte auch eine anwenderseitige Skriptsprache mit
(X)HTML verwenden und versuchen, die CSS3-Eigenschaft
’opacity’ per Skript zu modifizieren oder eben Bilder oder den
z-index von CSS zu tauschen. Gegenüber etwa der
SVG-Animation ist das aber wenig elegant und zudem nicht
mein Problem, da ich prinzipiell keine anwenderseitigen Skripte
verwende. Manche Anwender wie ich stellen die ohnehin ab,
dann funktioniert das ohnehin nicht mehr.

5

Das muss doch gehen?
Das war das was ich asubrobiert habe aber das hat irgendwie doch nicht funktioniert
Bin nur ein Hobby bastler?

[code]

function zufallsbild(){ ArrBilder = new Array ("Bild0.jpg","Bild1.jpg","Bild2.jpg","Bild3.jpg","Bild4.jpg","Bild5.jpg","Bild6.jpg","Bild7.jpg","Bild8.jpg","Bild9.jpg","Bild10.jpg","Bild11.jpg","Bild12.jpg","Bild13.jpg","Bild14.jpg","Bild15.jpg","Bild16.jpg","Bild17.jpg","Bild18.jpg","Bild19.jpg","Bild20.jpg"); var anzbilder = ArrBilder.length; var bildnr = parseInt(Math.random()*anzbilder); alert(bildnr); window.document.Zufallsbild.src = ArrBilder[bildnr]; [/code]
6

Kann mir denn niemand Helfen?

7

Willst du pro Seitenaufruf ein Bild anzeigen, das zufällig ausgewählt wird, oder willst du die Bilder während einem Seitenaufruf auswechseln lassen?

Um die Grafiken kümmere ich mich demnächst.

8

Danke :wink:
Also ich würde gerne eine Zeitspanne ein geben sagen wir z.B 3 sek. dann Bild1 3sek. bild2 usw.?

9

Hier ist ein Script, das ich gerade geschrieben habe. Sollte im IE und FF auf jeden Fall funktionieren, sonst habe ich es noch nicht getestet.
Zwischendurch ruckelt es ein wenig, ich versuche das noch zu beheben.

[code]

Bildübergang
[/code] Die gekennzeichneten Stellen musst du eben ändern.
10

Oha da hab ich es mir ja leicht gemacht ich dachte das wäre einfacher zu lösen.

Ich danke dir vielmals :slight_smile:

Werde es gleich testen aber muss jetzt erst mal was essen jamjam :wink:

Danke

11

vielleicht gehts auch einfacher, weiß ich nicht… :smiley:

12

Hi,
kannst du mir bitte noch anzeigen wo ich eine url zum bild eingeben muss

ich versteh dein script nicht wirklich :p

aber scheint zu gehen :wink:

13

Hier wie angegeben die Bildmaße angeben:

#bilder{
	width: 177px; /* hier Bildbreite eingeben!!! */
	height: 177px; /* hier Bildhöhe eingeben!!! */
	padding: 2px;
	border: 1px solid black;
}

Hier genauso:

#bildfrom{
	position: relative;
	top: -177px; /* hier Bildhöhe eingeben!!! */
}

Hier die Dateinamen angeben, einfach in der Form ‘bild1.jpg’,‘pfad/zu/bild2.jpg’,‘nochmal/ein/bild.jpg’,‘und.jpg’,‘so.jpg’,‘weiter.jpg’

		// hier Bilddateinamen angeben!!!
		this.bilder = new Array('bild1.jpg','bild2.jpg','bild3.jpg');

Einfach die Pfade in den Klammern abändern bzw. ergänzen.