HTML Javascript Drehfunktion

Gast #3866591
Hallo,
ich suche eine Funktion mit der man ein HTML-Element drehen kann.
1
<div>
2
<img src="Bild.jpg" alt="Bild"/>
3
<div>Drehen</div>
4
</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?
Gast #3866673
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.
Gast #3866878
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?
Gast #3868480
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.
1
this.setAttribute ("data-rotate",(getAttribute('data-rotate')+90));
oder
1
var data-rotate=getAttribute('data-rotate');
2
data-rotate+=90;
3
this.setAttribute ("data-rotate",data-rotate);
1
<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?

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 12 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.