nicht angemeldet
CSS Hintergrundbild per jquery um 90° drehen
Hallo,
ich habe eine unordered list, die als Hauptmenü erhalten muss. Das Gerüst besteht aus maximal 2 Ebenen. Nun habe ich als kleine grafik jedem Menüpunkt ein kleines Dreieck mit der Spitze nach rechts vorangestellt.
Klickt der User nun auf einen der Menüpunkte, so soll sich das Dreick um 90° drehen, so dass die Spitze nach unten zeigt, zeitgleich werden die entsprechenden Untermenüpunkte sichtbar.
Mein Problem ist das Drehen der Grafik, ich möchte aufgrund der vernünftigen Positionierung gerne an dem Hintergrundbild festhalten, und nur ungern auf das img-Tag zurückgreifen.
Die Dreiecksgrafik ist übrigens quadratisch.
Hat da wer schonmal was in die Richtung gemacht? Es gibt ja ne rotate-Funktion in jquery, aber ich weiss nicht, wie ich die auf das CSS-Bild anwenden kann.
Danke schonmal!
Gruß
mb-bs
-
Hallo,
Grafik in einem Grafikprogramm deiner Wahl um 90 Grad drehen -> abspeichern -> uploaden -> per JS die Grafik bei Bedarf austauschen -> fertig!
Gruß Gunther
-
Hi Gunther,
klar, das geht, dafür braucht es ja noch nicht einmal JS, sondern nur hover via CSS.
Mir gehts da eher drum, dass sich das Dreieck als Animation dreht, also nicht von 0 auf 90.Gruß
Michael
Hallo,
Grafik in einem Grafikprogramm deiner Wahl um 90 Grad drehen -> abspeichern -> uploaden -> per JS die Grafik bei Bedarf austauschen -> fertig!
Gruß Gunther
-
Hi Michel,
Mir gehts da eher drum, dass sich das Dreieck als Animation dreht, also nicht von 0 auf 90.
also in etwa so etwas wie hier?
Google ist dein Freund. Ich hatte als Suchbegriffe "jquery image rotate" verwendet.
Gruß Gunther
-
-
-
Hi,
Mein Problem ist das Drehen der Grafik, ich möchte aufgrund der vernünftigen Positionierung gerne an dem Hintergrundbild festhalten, und nur ungern auf das img-Tag zurückgreifen.
Das wirst du aber *müssen*, und zusätzlich wirst Du, s. das jquery-PlugIn-Beispiel, auch noch auf einen Browser hoffen müssen, der CANVAS von HTML5 schon implementiert hat (was zuindest die gängigen aktuellen großen Desktopbrowser haben - inkl. IE mit CANVAS-Workaround).
Gruß, Cybaer
--
Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
(Joseph Joubert, Schriftsteller)