Bilderwechsel onclick

[FritzHase]

Liebe Community!

Ich gebe es ja nicht gerne zu, aber ohne einen HTML-Editor wäre ich leider aufgeschmissen, - wenn ich mir Quellcodes ansehe, verstehe ich (größtenteils) nur Bahnhof...

Trotzdem möchte ich folgendes machen:


Ich hätte gerne eine Art Diashow mit einer bestimmten Anzahl an Bildern (circa 15-20 .gif-Dateien, alle in der selben Größe), die in einer vorbestimmten Reihenfolge durch Mausklick auf das gerade sichtbare Bild in einer Endlosschleife wechseln. Nachdem also das letzte Bild erreicht ist, soll es direkt (ohne das es dem Betrachter sofort auffällt) mit Bild Nr. 1 wieder losgehen...

Natürlich habe ich bereits Google bemüht und etliche Vorlagen gefunden, aber 1. bin ich leider nicht in der Lage gewesen, sie so umzuschreiben, dass sie auch bei mir funktionierten (siehe oben!) und 2. war immer irgendwas (z.B. Thumbnails, Textlinks o.ä.) neben den Bildern dabei, was ich nicht haben will!

Dass ein neues Foto erscheint, wenn man auf das gerade sichtbare Bild klickt, wird aus dem Text klar, das über der "Diashow" stehen wird. Thumbnails, Text- oder grafische Links (Pfeile o.ä.) zum Weiterklicken sind in diesem Fall eher unerwünscht!

Phänomenal wäre es, wenn die Bilder nach Mausklick langsam ein- und ausgeblendet würden. Ist das überhaupt möglich?

Falls mir wirklich jemand helfen würde, würde ich mich natürlich unheimlich freuen.
Allerdings würde wohl leider ("nur") ein entsprechendes Script nicht ausreichen, - ich bräuchte auch noch ein paar Hinweise (für Doofies), welcher Teil in den HEAD und was unter BODY gespeichert werden muss und welche Zeilen bzw. Platzhalter ich mit meinen eigenen Angaben (z.B. Bilder-URL) austauschen (oder wie ich meine .gifs benennen) muss, damit es bei mir klappt.

Ist es sinnvoll, wenn die Bilder beim Seitenaufruf im Hintergrund schon geladen werden?
(Bei der Google-Suche habe ich was aufgeschnappt und frage jetzt mal einfach, ohne genau zu wissen, um was es eigentlich geht Benötige ich jQuery o.ä.?
Und wenn ja, was muss ich dabei beachten bzw. wie füge ich das ein?

Ich hoffe sehr auf Eure Hilfe!

[wuselmann]

Ohne viel Schnick und Schnack und JavaScript kannst Du bereits mit CSS und HTML Bilder mit einem Klick auf sie weiterschalten:

• DIV mit gleicher Größe wie Bild und CSS-Eigenschaft overflow:hidden; anlegen
• Bilder in DIV einfügen
• vor jedem DIV einen Anker einfügen
• Jedes Bild linkt auf den Anker hinter ihm; das letzte natürlich auf das erste

Beispiel: http://www.gyn-roloff.de/praxis.html

Für alles andere musst Du die jQuery-Kanone auspacken.

[schollsen]

Hallo Wuselmann,
Du weisst schon, dass "Anker setzen" ziemlich überflüssig ist?!
http://jsfiddle.net/gWbqF/

[wuselmann]

Mein Vorredner hat Recht.