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
Borlander 
Elvereth „Neue Startseite auf meiner Homepage.“
Also mein Ding ist das nicht in so einem streichholzschachtelgroßen Fenster umherzuscrollen...
Gruß
Borlander
Luntze Borlander „Also mein Ding ist das nicht in so einem streichholzschachtelgroßen Fenster...“
Ich finde es sehr originell.
Wie geht das denn?
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
Elvereth Borlander „Also mein Ding ist das nicht in so einem streichholzschachtelgroßen Fenster...“
mit nem anderen Browser siehst Du vielleicht auch das Drumrum... also die Knöpfe der Sektionen. Das, was Du als Streichholzschachtelgroßes Fenster bemängelst, ist nur für die Ankündigung von Neuigkeiten.
CU Elvereth
[Diese Nachricht wurde nachträglich bearbeitet.]
Borlander Elvereth „mit nem anderen Browser siehst Du vielleicht auch das Drumrum... also die...“
Hm, hab das ganze noch mal mit Opera angeschaut und damit dann erstmalig die Rotation der Links gesehen. Bei Firefox tut sich gar nix, beim IE dürfte das wohl schon durch meine restriktiven Sicherheiteinstellungen nicht mehr laufen.
Sieht so natürlich schonmal deutlich interessanter aus, frisst allerdings auch gut CPU-Zeit (auf meiner Workstation habe verursacht das im Schnitt 8% Gesamtlast, auf einer 1-CPU-Maschine würde das dann schon 16% (!) entsprechen)...
Zum Fenster: Im IE schaut es zumindest schon harmloser aus - da gibt es keinen horizontalen Scrollbalken mehr wie in FF. Ich vermute das wird mit der verschiedenen Interpretation von 100% Breite bei Scrollenden Bereichen zusammenhängen.
Gruß
Borlander
