Bild dreht sich mit der Maus

[Alex]

Hallo Leute,

ich wollte fragen ob einer weiß, wie ich folgendes umsetze:

Ich wollte als Navigation nen Kompass machen und möchte, dass sich das Bilder der Nadel mit der Maus dreht. So wie ein fixierter Mausverfolger.

Ich hoffe ihr versteht was ich meine und könnt mir vielleicht helfen.

Liebe Grüße,
Alex

[JürgenB]

Hallo Alex,

nur eine Idee:

du nimmst eine Imagemap, definierst die Flächen für die Mauspositionen, bei denen der Kompass auf N, NNO, ... stehen soll und spendierst diesen Flächen eine onmouseover-Event, das das Bild ändert.

Anregungen findest du evtl. hier: http://www.pseliger.de/testCases/federalStatesOfGermany.html

Gruß, Jürgen

[ritschmanhard]

Hi Alex!

Also, wenn ich das richtig verstehe: du hast das Bild eines Kompasses; und nun bewegst du den Maus Cursor um diesen Kompass herum.
Dabei soll sich nun das Bild ändern und die Kompassnadel in Richtung des Cursors zeigen?

Hierfür verschiedene Ansätze:

Ansatz 1:
Kombination von Javascript und dynamischem HTML:
zuerst werden die gemalten (z.B. gradweise => 360) verschiedenen Bilder mittels Javascript in ein Array gespeichert. Über einen Eventhandler kann nun die Mausposition ermittelt, der Winkel zum Kompassmittelpunkt berechnet und das entsprechende Bild aus dem Array angezeigt werden.
Vorteil: Geht auf allen neueren Browsern
Nachteil: 360 Bilder für die Navigation zu übertragen ist suboptimal

Ansatz 2:
Mittels Javascript und SVG lässt sich sowas sicher auch realisieren.
Vorteil: Verwendung aktueller Technik ohne Datenoverhead
Nachteil: SVG wird nicht immer gut unterstützt; insbesondere der IE hat meines Wissens gar keinen SVG support

Ansatz 3:
Mittels dynamischem HTML, Javascript, einer Textarea (mit Fontsize = 1) und einigen kleinen Tricks kann man auch Clientseitig einfache Grafiken erzeugen. Dies ist jedoch keinesfalls standardkonform und deshalb mit vorsicht zu genießen.

Grüsse,
Richard

[JürgenB]

Hallo ritschmanhard,

Ansatz 3:
Mittels dynamischem HTML, Javascript, einer Textarea (mit Fontsize = 1) und einigen kleinen Tricks kann man auch Clientseitig einfache Grafiken erzeugen. Dies ist jedoch keinesfalls standardkonform und deshalb mit vorsicht zu genießen.

das funktioniert sehr gut, wenn der Rechner schnell genug ist. Siehe z.B. http://www.j-berkemeier.de/LogistischeAbbildung.html oder http://www.j-berkemeier.de/FktPlot.html. Ich nehme übrigens 1px große DIVs.

Gruß, Jürgen

[Tommi]

Hallo Jürgen

http://www.j-berkemeier.de/FktPlot.html.

f(x) = x^2 hatte ich aus der Schule aber irgendwie anders in Erinnerung ;-) (OK, f(x) = x*x geht).

Tommi

[JürgenB]

Hallo Tommi,

f(x) = x^2 hatte ich aus der Schule aber irgendwie anders in Erinnerung ;-) (OK, f(x) = x*x geht).

na ja, das ist eben Javascript:

^ definiert in einer Bitmaske eine exklusive Oder-Bedingung
http://de.selfhtml.org/javascript/sprache/operatoren.htm#bits

Gruß, Jürgen

[Felix Riesterer]

Lieber ritschmanhard,

Ansatz 1:
Kombination von Javascript und dynamischem HTML:

...finde ich besser, als auf Plugins (Flash) zurückzugreifen.

zuerst werden die gemalten (z.B. gradweise => 360) verschiedenen Bilder mittels Javascript in ein Array gespeichert.

Besser: Alle Bilder übereinander in einem Bild ablegen und dieses eine Bild anstatt der 360 Bilder verwenden.

Über einen Eventhandler kann nun die Mausposition ermittelt, der Winkel zum Kompassmittelpunkt berechnet und das entsprechende Bild aus dem Array angezeigt werden.

Anstatt "Bild aus dem Array" kann man auch eine Bildposition errechnen lassen, die dann mittels der CSS-Eigenschaft "background-position" von Javascript eingestellt wird.

Vorteil: Geht auf allen neueren Browsern

Meines Wissens geht das sogar auf IE5er-Varianten.

Nachteil: 360 Bilder für die Navigation zu übertragen ist suboptimal

Daher verwenden wir nur ein Bild.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[bleicher]

Grüße,| Hallo Leute,
vorshcläge die bisher kamen waren sicher sehr sinnvoll - aber afaik wäre flash mal überlegung wert - vor allem weil es die vorteile von 1 und 2 ("konform" bzw überverbreitet und zugleich trafficshconend)

als fazit aber - ich vermute der gimmik ist dir den aufwand nciht wert.
ah ja - du könntest mal eine lösung mit einem png mit transparenz unter dem du eine grafik schiebst evrwenden. dann siehst du aber kein pfeil sondern viel mehr eine art "pfeilspitze" - wäre überlegung wert
MFG
bleicher