SizingNavigation

Version 1.o | 30.09.2009

Die SizingNavigation ist eine mit JavaScript realisierte Grafik-Navigation.
Wenn der Cursor über ein Icon fährt, vergrössert sich dieses und die anderen Icons weichen zur Seite.
Das Prinzip der Navigation dürfte schon anderweitig bekannt sein.

► Vorschau

► Download (zip · 9 KB)
► Infos zur Installation weiter unten

Programmiersprachen

  • JavaScript
  • XHTML

Installation

  1. Lade das Zip-Archiv herunter und entpacke es.
  2. Speichere die Dateien sizingNavigation.js und spacer.png sowie deine Grafiken am gewünschten Ort.
  3. Öffne die Datei sizingNavigation.js und passe die 5 Variablen an.
    minWidth und minHeight enthalten die Standard-Grössen der Grafiken.
    maxWidth und maxHeight enthalten die Grössen der vergrösserten Grafiken.
    resizeSpeed enthält die Geschwindigkeit der Grössenänderung, dabei gilt: je kleiner desto schneller.
  4. Kopiere den Quellcode der Datei sizingNavigation.html in die gewünschte(n) Datei(en) deiner Website. Orientiere dich dabei an den vorhandenen CSS- und HTML-Kommentaren.
  5. Passe die individuellen Links und die Image-Elemente sowie die CSS-Angaben im kopierten Code deinen Vorstellungen an.
  6. Wenn alles korrekt angepasst wurde, ist die SizingNavigation nun funktionsfähig.

Anmerkungen

  • Der HTML-Quelltext wurde mit Hilfe von JavaScript so angelegt, dass er möglichst wenig Platz benötigt und damit einfach zu handhaben ist.
  • Es wird davon ausgegangen, dass die Grafiken quadratisch sind.

Tipps

  • Es empfiehlt sich, dass die Originalgrösse der Grafiken exakt entweder der Standard-Grösse oder der vergrösserten Grösse entspricht.
  • Mit der CSS-Angabe "vertical-align" im Block "#sizingNavigation img" kannst Du bestimmen, ob die Vergrösserung nur nach oben, nur nach unten oder in beide Richtungen stattfinden soll.