Hallo Leute,
ich hab heute mit meiner neuen startseite etwas (für mich) ganz neues ausprobiert.
http://www.svenspages.de/
Wie funktionierts bei Euch so ? Getestet unter Opera 7, 8, IE 6, Firefox.
CU Elvereth
Elvereth Luntze „Ich finde es sehr originell. Wie geht das denn?“
Hallo Luntze,
Sehr schön dass es Dir gefällt.
Also mal kurz was zur Funktionsweise:
Jeder Menüpunkt (sechs gibts) besteht aus einem Link (ein Icon) und einem Bild (der Text unten drunter), und einem umschließenden DIV-Container. Diese DIV-Container haben eine ID, über die man den Container ansprechen kann. mit dem Befehl getElementById(IDName) kann man mit etwas Javascript auf die style-Eigenschaften des Containers zugreifen. Es ist dabei zu beachten, dass die Style-Eigenschaften eines Objekts bei verschiedenen Browsern unterschiedlich implementiert wurden.
z.B.
menu1=getElementByID('menu1');
menu1.{...}.style.left=9;
Würde das Element 9 Pixel von der linken Kante des Fensters odder Elternoibjekts anordnen. {...} ist der Browserabhängige Part in der Objekthierarchie.
Die Koordinaten für die Kreisbewegung ist etwas sinus und cosinus; die Ergebnisse werden der left- und top-Style-Eigenschaft des jeweiligen DIV-Objekt zugewiesen und es so positioniert.
Dann gibts noch eine Schleife, die sich alle 100ms selbst neu aufruft. Das geht mit setTimeout(). Diese Funktion ruft zählt eine Winkelvariable (0..360) um 1 hoch bzw. runter. Dann werden die Koordinaten neu berechnet. Dann die DIVs danach positioniert. Das Inkrement selbst ist auch eine Variable. Diese kann 0, -1 oder +1 annehmen. Abhängig davon wird ein Bild für das Männchen unten eingeblendet. Drumrum gibts ein paar Logikfunktionen für die Bedienung. Eine wechselt die Richtung und wird direkt aufgerufen, wenn das Männchen angeklickt wird. Die anderen beiden Funktionen Pause() und Continue(). Pause() speichert das Inkrement temporär zwischen und setzt es auf null (was auch ein anderes Bild zur Folge hat und das Rad anhält). Continue() setzt das Inkrement wieder auf den vorigen Wert. Pause() und Continue() werden als onMouseOver- bzw. onMouseOut-Eventhandler für die Menüpunkte aufgerufen.
So. Das war das Javascript. Die Daten dazu und das dazu passende HTML wird dynamisch durch das PHP-Script erzeugt, so dass ich keine Änderungen am Javascript selbst machen muss, um z.B. einen Menüpunkt hinzuzufügen, sondern muss im PHP-Script im Prinzip nur ein Array um ein Element erweitern. Der Rest ergibt sich dann von allein.
CU Elvereth
