HTML Javascript Drehfunktion

[Flughafen (Gast)]

Hallo,
ich suche eine Funktion mit der man ein HTML-Element drehen kann.

<div>
<img src="Bild.jpg" alt="Bild"/>
<div>Drehen</div>
</div>

Beim Klicken auf Drehen (also den div darum) soll das Bild um 90° 
gedreht werden, bei erneutem Klicken nochmals 90° u.s.w.. Der Außendiv 
sowie der Drehendiv sollten keine id benötigen, weil das Konstrukt immer 
wieder automatisch nach Knopfdruck per Javascript geschrieben wird.
Wie ist das zu lösen?

[Webseiten-Programmierer (Gast)]

Dazu fällt mir nur die CSS-Angabe transform:rotate(90deg); ein. Ich habe 
aber etwa das gleiche Problem. Der schwierige Teil für mich ist, dass 
das img gedreht wird und nicht der aeussere div. Wenn der Text gedreht 
werden müsste, könnte man das einmalig mit onclick=\'var element = 
this;element.classList.add("gedreht");\' machen. .gedreht entspricht 
dabei der CSS-Angabe s.o.. Wie man das übertragen könnte weiß ich aber 
nicht. Genausowenig, wie man viele 90°-Drehungen hinbekommt.

[keine Ahnung von Webprogrammierung (Gast)]

Webseiten-Programmierer schrieb:

> dabei der CSS-Angabe s.o.. Wie man das übertragen könnte weiß ich aber
> nicht. Genausowenig, wie man viele 90°-Drehungen hinbekommt.
Data Attribut ans Bild pappen und den Wert merken bei jedem click erhöht 
man um 90° und rotiert entspr. weit, per css.
http://stackoverflow.com/questions/20061774/rotate-an-image-in-image-source-
in-html

google suche bedienen ist schon was Schweres, ne?

[Flughafen (Gast)]

keine Ahnung von Webprogrammierung schrieb:
> google suche bedienen ist schon was Schweres, ne?

Nö.
Hab nur nicht gefunden, was ich suchte.

Das geht aber in die richtige Richtung. Im Prinzip muss man nur in 
data-rotate eingeben, um wie viel ° das Bild gedreht werden soll.

this.setAttribute ("data-rotate",(getAttribute('data-rotate')+90));

oder

var data-rotate=getAttribute('data-rotate');
data-rotate+=90;
this.setAttribute ("data-rotate",data-rotate);

<div onclick='this.setAttribute ("data-rotate",(getAttribute("data-rotate")+90));'>Drehen</div>

Nun möchte ich aber das ganze durch JS ausgeben, und es gibt nur ' und 
". Ich brauche also einen dritten Typ.

> Beim Klicken auf Drehen (also den div darum) soll das Bild um 90°
> gedreht werden, bei erneutem Klicken nochmals 90° u.s.w.. Der Außendiv
> sowie der Drehendiv sollten keine id benötigen, weil das Konstrukt immer
> wieder automatisch nach Knopfdruck per Javascript geschrieben wird.

Das ist leider noch nicht berücksichtigt. Würde das Programm denn ohne 
diese Funktion funktionieren?