<div> Objekt um verschiedene °Werte drehen

[bandi]

Hallo zusammen,

das Objekt (Img) soll sich um verschiedene °Werte drehen, die Auslöser (Listenpunkte) sollen durch hovern ausgelöst werden.


ich habe es mit HTML und CSS probiert, dabei funktioniert leider immer nur ein wert.


Es wäre ultra nett, wenn mir jemand weiterhelfen könnte.

Schon mal vielen Dank im Voraus.

Bitte schreibt mir keine herablassenden Kommentare, das wäre Zeitverschwendung.

MfG

 

[Aaron3219]

Soll nach dem hover denn die Rotation bleiben oder wieder zurückgehen?

Falls ersteres der Fall ist wirst du ohne JavaScript wirst du da wohl nicht weiterkommen.
Ist auch eigentlich gar nicht so schwer. Was du machen solltest ist eine Funktion erstellen, die eine Gradzahl als Parameter verwendet. So kannst du einfach einen onmouseover Attribut für jedes deiner Länder setzen, der den Parameter in die Funktion gibt.
Hier ein Fiddle.

Wenn zweiteres der Fall ist, würde es auch ohne JS gehen, ist aber eigentlich eher umständlicher und nicht dynamisch. Wenn du JS verwendest, müsstest du halt einen onmouseout event-listener setzen (diesmal aber nicht als Attribut, weil das umständlicher wäre), der das transform wieder entfernt.
Die CSS-only Lösung funktioniert nur mit entsprechender Code-Struktur, da man ja keine Eltern-Elemente ansprechen kann (Cascading Style Sheets).
Hier ein Fiddle.

 

[bandi]

Hallo Aaron3219,
du bist der Hammer.
Ich werde das morgen sofort ausprobieren bzw. umsetzen.
Vielen Dank