Mit Mouseover Navigation scrollen (java?)

[C64]

Hallo zusammen,

ich möchte folgendes Problem lösen:

Dsas graue Navigationrechteck ist bspw. am Anfang bei "über uns".
Nun bewegt jemand den Mauszeiger auf "unsere referenzen".

Kann ich nun das .png im Hintergrund auf die Position von "unsere referenzen" bewegen?
Ich bin mir sicher das das klappen kann.

Meine Überlegung. Der Abstand links beginnt mit dem Wert 0. Je nach berührtem Navigationspunkt wird der Abstandswert von links gesetzt (im beispiel wären es 3*140px=420px Abstand).

Ein Skript müsste dann den aktuellen Wert solange um 1px erhöhen bzw verringern, bis der entsprechende Abstandspunkt erreicht ist.

Bin ich vollkommen daneben? Und viel wichtiger, wie kann ich das mit java oder php umsetzen? Ich kenn mich da leider nur seeeehr rudimentär aus (gelobe in diesem Punkt Besserung sobald ich wieder Zeit habe!).

Kann ich dazu auch auf solche Skripts hier zurückgreifen?

Danke euch jetzt schon sehr, sehr herzlich für eure Tips, Hilfe, Komplettlösungen

Edit: ich habe mich jetzt etwas in das verlinkte Skript reingedacht. Aber ich verstehe nicht alle Optionen. Wie muss das Skript "einstellen", damit es bei einem Mouseover zur gewünschten Position springt?

 

[bezierkurve]

JavaScript meinst du, gell?

Das wäre was für script.aculo.us; die Bewegung bekommst du da mit einem Einzeiler über Effect.Move hin, den du jeweils in den onmouseover-Eventhandler jedes Menüeintrags packen kannst.

Dies mal so als groben Ansatz, für eine Komplettlösung bin ich gerade zu müde, sorry .

 

[C64]

JavaScript meinst du, gell?

Das wäre was für script.aculo.us; die Bewegung bekommst du da mit einem Einzeiler über Effect.Move hin. Zur Komplettlösung fehlt mir gerade der Elan, sorry, aber das bekommst du schon hin!

Klar JavaSkript... da war ich wohl zu schreibfaul

Ich schau mir mal den Lösungsvorschlag an - scheint wirklich nicht so schwer zu sein. Statt onclick schreib ich dann hald onmouseover, richtig?

 

[bezierkurve]

Ich schau mir mal den Lösungsvorschlag an - scheint wirklich nicht so schwer zu sein. Statt onclick schreib ich dann hald onmouseover, richtig?

Genau, siehe auch Edit oben .

 

[C64]

Top:-D

Habs hinbekommen - in etwa so (muss jetzt nur noch die Links in die Divs packen und alles sortieren...):

Edit: So funktioniert die Komplettlösung:

<div id="navigation">
<div class="nav"><a href="#" onmouseover="$('navigation').morph('background-position: 0px;'); return false;">über uns</a></div>
<div class="nav"><a href="#" onmouseover="$('navigation').morph('background-position: 140px;'); return false;">wir bieten</a></div>
<div class="nav"><a href="#" onmouseover="$('navigation').morph('background-position: 280px;'); return false;" >unsere künstler</a></div>
<div class="nav"><a href="#" onmouseover="$('navigation').morph('background-position: 420px;'); return false;" >unsere referenzen</a></div>
<div class="nav"><a href="#" onmouseover="$('navigation').morph('background-position: 560px;'); return false;" >mail an uns</a></div>
</div>

:-D Danke noch mal für den sehr guten Hinweis, bezierkurve