Hallo liebes Forum,

ich habe nur wenig Javascript-Kentnisse, hoffe aber, dass es für mein Problem eine ganz einfache Lösung gibt.

Vorgegeben sind:
HTML img-Tags werden aus einer Datenbank generiert und müssen alle gleich aufgebaut sein ("id" nicht möglich).

Folgendes möchte ich nun erreichen:
Bei Klick auf auf eines der Bilder, soll dem angeklickten Bild eine bestimmter Stylesheet zugefügt werden (soweit, so einfach). Doch klickt man auf ein anderes Bild, soll der Stylesheet vom vorherigen Bild wieder entfernt werden und dem aktuell angeklickten hinzugefügt werden usw.

Folgendes habe ich, aber es fehlt halt die Funktion, wie das Stylesheet bei den aktuell-nicht-angeklickten Bildern wieder entfernt wird:
...
<img src="Bild1.gif" onClick="this.style.width='100%';">
<img src="Bild2.gif" onClick="this.style.width='100%';">
<img src="Bild3.gif" onClick="this.style.width='100%';">
...

(Das "width"-Attribut ist nur als Beispiel gedacht, es geht Stylesheets allgemein.)

Für sowas müsste es doch eine ganz einfache Lösung geben. Kennt sich hier jemand etwas damit aus und kann mir jemand einen Tip geben?

Wie wäre es, wenn Du das Ganze nicht mit JavaScript löst, sondern ganz einfach und intelligent mit Cascading Stylesheets und den kraftvollen Möglichkeiten, die es da gibt? Ich denke da z.B. an Selektoren und besonders die Pseudoklasse :active und auch :hover , , welche man da klein, niedlich und wirkungsvoll zur Anwendung bringen könnte.

@sierkb:
Natürlich wäre eine CSS-Lösung noch besser aber soweit mir bekannt ist, lässt sich damit kein onClick-Ereignis oder etwas vergleichbares auslösen.
Der "Effekt" (in diesm Fall das Hinzufügen von Stylesheet) soll ja auch NACH dem Klick auf das Bild erhalten bleiben und wieder verschwinden, wenn ein anderes Bild angeklickt wird und natürlich wieder hinzugefügt werden, wird es erneut angeklickt...

Die pseudo-Klassen fallen damit als Möglichkeit - soweit ich das sehe - weg.

Deswegen suche ich ja eine Javascript-Lösung

Und was ist die Pseudo-Klasse :active ?
Diese Klasse macht doch nichts anderes, als die dahinterstehende Regel anzuwenden, wenn das betreffende Element aktiviert (sprich: angeklickt) worden ist...
Anwendbar auf jedes Element im DOM-Baum.

Versuche mal, diesen Gedanken dahingehend abzuwandeln, dass da kein CSS irgendwie hinzugefügt oder wieder entfernt werden muss, sondern versuche mal in einmal notierten CSS-Regeln zu denken und zu schreiben, welche verschiedene Wirkungsmöglichkeiten anbieten, je nachdem, wie die Elemente zueinander angeordnet sind. Die kann man mittels Selektoren (nach dem Motto: "Wende auf folgende Elemente die und die Regel an, wenn dieses und jenes Element so und so zueinanderstehen und jenes Element dieses Eltern-Element hat und diese Elemente dieses und jenes Kind-Element haben und diese Konstellation dann von der Maus aktiviert wird" -- so in der Art) so intelligent schachteln und hintereinanderketten, dass die dahinterstehenden Regeln nur in einer bestimmten Konstellation gelten und in einer anderen eben nicht.

Da ist Einiges machbar und möglich bzw. intelligent steuerbar, ohne dass dafür JavaScript bzw. irgendwelche großen Arbeiten im DOM-Baum vonnöten sind.

Das sehe ich etwas anders. Sie könnte man intelligent nutzen.

Die suchst Du vielleicht nur deshalb, weil Du bisher nicht gewohnt bist, derlei Aufgaben in CSS zu lösen. CSS ist mächtiger und flexibler als Du glaubst, und damit lassen sich so einige Dinge bewirken, wofür so mancher erstmal groß was mittels JavaScript zusammengebaut hat.

Ich denke, einen Anstoß für einen neuen, wahrscheinlich viel einfacher umzusetzenden Denkansatz, der höchstwahrscheinlich erstmal ohne DOM-Manipulation via JavaScript auskommt, hast Du nun.

Abgesehen davon -- falls es doch mit JavaScript sein soll: weise den Bildern Klassen und IDs zu, die meinetwegen per JavaScript dynamisch in die betreffenden HTML-Elemente geschrieben werden, und diese Klassen und IDs werden dann in einem separaten Stylesheet genau ausgestaltet und beschrieben. Im Übrigen sind auch mehrere Klassen pro HTML-Element erlaubt, jeweils getrennt durch ein Leerzeichen. Eine ID darf pro HTML-Dokument nur ein einziges Mal vergeben werden, deshalb heißt es ID. Also zum Beispiel so: <img src="URI" class="klasse1 klasse2 klasse3" id="id1">

So. Und nun lasse Deiner Kreativität und Deinem Ideen-Reichtum freien Lauf, und versuche mal, Ergebnis-orientiert, das heißt, ausgehend von dem, was das Ganze tun und bewirken soll, da mal was in der Richtung umzusetzen. Da geht noch was.

Wenn du prototype.js einsetzen kannst, kannst du es (ungefähr) wie folgt machen:
JS:
HTML:

Kleine Anmerkung:
Gemäß RFC 4329 müsste der verwendete Mimetype zukunftssicher eigentlich entweder "application/javascript" oder "application/ecmascript" heißen. Der einzige Web-Browser, der das nicht versteht, und dem man klassisch die bis RFC 4329 nie spezifizierte Form "text/javascript" vorsetzen muss, ist wieder einmal der Internet Explorer, alle anderen Browser wie auch der Apache Webserver wissen RFC 4329 zu würdigen, welches "text/javascript" für obsolet deklariert zugunsten dieser beiden neuen Mimetypes für JavaScript respektive ECMAScript. Vor Inkrafttreten von RFC 4329, das heißt, vor April 2006 war text/javascript übrigends nirgends spezifiziert. Alle Welt hat's verwendet, ohne dass dieser Mimetype irgendwo festgelegt, niedergeschrieben bzw. näher spezifiziert worden ist. Das hat RFC 4329 im Jahre 2006 nachgeholt und text/javascript zugleich aufs Altenteil geschickt.
Das nur mal so am Rande als kleine Hintergrundinfo...

Danke, ja, jQuery oder Prototype zu nutzen hatte ich auch schon überlegt, allerdings möchte ich es nur für diese eine billige Funktion nicht extra einbauen.
Ich werde mich nochmal an ein spezielles Javascript-Forum wenden, wo ich mehr Javascript-spezifische Hilfe finde.
Trotzdem danke für deine Bemühungen.