Christoph Zurnieden: Layout und Idee... und nun ?!

Beitrag lesen

Hi,

http://web296.nsi11.miniserver.de/bilder/home.jpg

So. Da wo die große freie Fläche ist soll später ne Textarea sein, mit Texten, Bildern, Votes etc...

Die verschiedenen Gegenstände wie z.B. die Kamera, das Handy, das Fragezeichen oder der Fußball soll man anklicken können (ich umrande das dann mit ner Linie quasi wie in einer Imagemap). Wenn man die Gegenstände anklickt soll in der Textbox dann die entsprechende Kategorie zum Vorschein kommen.

Zusätzlich will ich zu jedem Gegenständ ein Rollover einbauen, in dem der Gegenstand die Farbe wechselt...

Jetzt frag ich mich nach dem "wie"...

Genau so, wie Du auch die Vorlage erstellt hast: als Collage.
Erinnere Dich: Du hast alle Teile ausgeschnibbelt und auf einem gemeinsamem Medium zusammengestellt (Mit Tesafilm, wie's aussieht, aber das spielt rein gar keine Rolle). Das kannst Du nicht ganz genau 1:1 auf's Web übertragen, denn da gibt es als Umriss nur Kästchen. Allerdings verfügen einige Graphikformate über die Möglichkeit die "Farbe" Transparent anzugeben (z.B. GIF, PNG usw).
So, wenn Du mir bis hierhin folgen konntest hast Du nun alle Einzelteile Deiner Collage als -- ich nehme mal an GIF- -- Bild mit transparentem Hintergrund vorliegen. Die baust Du nun wieder als Collage zusammen, der gemeinsame Hintergrund ist nun eine HTML-Seite.
Es wird in der Reihenfolge dargestellt, wie es angegeben ist: das zuletzt angegeben Bild wird über allen anderen platziert. Ändern kannst Du das mit der CSS-Angabe 'z-index'.
Die Position kannst Du in CSS mit -- nun rate mal, genau: "position" (hier dürfte wohl "position: absolute;" passen. Zumindest für's erste) und allen Anverwandten ("left","right", "top", "bottom" usw) bestimmen. Der Punkt "0,0" ist übrigens oben links! Es ist möglich die Position mit Pixeln zu bestimmen, aber davon sollte Abstand genommen werden, da es dann nur für eine einzige Darstellungsgröße (Platz im Browserfenster und zwar _Netto_, ohne Scrollleisten, Zusatzfenstern und allem, die reine dargestellte Fläche der Webseite) paßt. Besser wären relative Angaben, bezogen auf die eingestellte Schriftgröße. Aber das ist etwas komplizierter.
Der gewünschte Rollover funktioniert dann wie gewohnt. Falls Du überhaupt nicht weißt, wie das funktioniert frage das hiesige Archiv, das weiß normalerweise alles. Da es das aber nicht immer gut erklären kann und mitunter auch gut vesteckt, bist Du natürlich herzlich eingeladen hier im Forum nachzufragen.

Noch ein kleiner Tip zuletzt: versuche nicht alles auf einmal zu implementieren, fang ganz klein an. Probiere Dich z.B. erstmal darin ein paar Bildchen "aufzukleben". Hast Du das im Griff fängst Du eine neue Datei an und probierst da, den Textbereich zu positionieren. Dann bau' beides zusammen. Fang eine neue Datei an, platziere zwei Bilder mit Überlappung und probiere da den Rollover aus, baue dann alles zusammen.
Probiere verschiedene Fenster- und Schriftgrößen aus und schaue zu, wie Dein mühselig zusammengefummeltes Design in sich zusammenfällt.
Frage hier nach: "Watt der Mist denn soll?" ;-)

so short

Christoph Zurnieden