Navigation aus Grafiken mit CSS und HTML erstellen

[Monkeycel]

Hallo,
Ich soll für die Schule eine Webseite erstellen und hab sie mir jetzt in Photoshop zurechtgebastelt.
Hab sie auch schon zum Teil in html, nur komm nun bei der Mouseover-Funktion nicht weiter, die ich einbauen will.
Habe 4 Grafiken ("Startseite", "Rezepte", "Vegetarisch", "Vorschlag"). Jeweils einmal in hell (mouseover) und einmal in dunkel (Mouseout). So diese Grafiken sind als .png mit Transparenz gespeichert. Die Grafiken sind zu allem Überfluss also auch noch zu groß als dass ich ein einfaches mouseover machen kann.
Ich würde also eine unsichtbare Fläche basteln, dass wenn jemand auf diese kommt der Startseitenbutton (startoff.png) durch die helle Version (starton.png) ersetzt wird. Der Button brauch natürlich auch noch ein Link für seine Funktion.
Nur wie das ganze? Es wäre sehr nett wenn ihr mir vielleicht weiterhelfen könntet. Sind meine ersten Schritte, bitte dementsprechend erklären.
Danke.

 

[owieortho]

Mal davon abgesehen, dass Bilder, wenn sie "zu groß" sind, nicht wirklich für eine Navigation taugen, ist folgende Umsetzung denkbar:
Zum einen vermeidest Du die Verzögerung, die beim allerersten mouseover durch das Nachladen des jetzt benötigten Hoverbildes ensteht, indem Du beide Bilder in einem Bild anlegst. Z. B. die linke Hälfte ist das Standardbild, die rechte Hälfte das Hoverbild. Da das gesamte Bild (beide Hälften) geladen wird, sind auch beide Teilansichten ohne Nachladen da. Das Bild fügst Du dann so ein:

<style>
    #nav1 {
        width: halbe Bildbreitepx; height: gesamte Bildhöhepx;
        background: url('bild.png') no-repeat left top;
    }
    #nav1:hover { background-position: -halbe Bildbreitepx 0px } /*das Minus vor der halben Bildbreite ist wichtig
</style>
 
<div id="nav1" />

Die weiteren Navigationspunkte legst Du dann entsprechend mit nav2, nav3, etc. und entsprechend angepasstem CSS an.

Viel Erfolg
O.

 

[Jormungand]

So, wie owieortho geschrieben hat, kannst du alle Grafiken in ein großes Bild packen und durch Anzeigen eines Auschnittes des großen Bildes den entsprechenden Ausschnitt anzeigen. Das Stichwort hierfür ist "css sprites".

Um deine zu großen PNG-24 zu verkleinern, hab ich hier noch einen netten Link:
https://tinypng.com/

 

[Monkeycel]

Ach man kann in CSS auch div-Container mit Pseudoklassen versehen. WOW Danke es klappt. Sau cool.
Das mit großen Bildern und Navi hab ich mir schon gedacht. Muss das Motto "weniger ist mehr" noch lernen zu verinnerlichen ^^
Danke für den Link Jormungand, aber vorerst wird das eh nicht online gehen.

Ich danke euch an dieser Stelle schonmal vielmals. Kommen aber bestimmt noch Fragen.

 

[Monkeycel]

So da ist die nächste Frage:
Habe ein ziemlich großes Hitnergrundbild und möchte nicht das dies insofern beachtet wird, dass Scrollbalken an der Seite sind "um sich das Hintergrundbild ganz betrachten zu können". Bin schon ein Schritt weiter gekommen, indem ich das Bild über css eingefügt habe und mit overflow versehen habe.

#holzbg {
width: 100%; height: 100%;
background: url('Bilder/holzbg.gif') no-repeat 0 0;
position:absolute; top:0px; left:0px;
overflow: hidden;
z-index: 1;
}

Nun schneidet er das Bild aber auf Fenstergröße zurecht und wenn man nun wegen dem Inhalt runterscrollt, fehlt ein Teil des Hintergrundbildes.

 

[owieortho]

Deine letzte Frage hat mit "Navigation aus Grafiken mit CSS und HTML erstellen" nichts zu tun. Erstelle dafür einen neuen Thread mit passender Überschrift - kost auch nix.

O.

 

[Aelfry]

#holzbg {
width: 100%; height: 100%;
background: url('Bilder/holzbg.gif') no-repeat 0 0;
position:absolute; top:0px; left:0px;
overflow: hidden;
z-index: 1;
}

Nun schneidet er das Bild aber auf Fenstergröße zurecht und wenn man nun wegen dem Inhalt runterscrollt, fehlt ein Teil des Hintergrundbildes.

Wie owieortho schon gesagt hat, mach dafür einen neuen Thread auf.
Immer nur ein Problem pro Thread - sonst wird's schnell unübersichtlich.
Auch wäre es sicher nicht verkehrt, dein Layout vorneweg zu zeigen, damit man weiß wo du hin willst.

Kurz zu deinem Problem: es klingt so, als wolltest du das Bild als Website Hintergrund verwenden.
In dem Fall einfach das Bild dem body zuweisen.

body { background: url('Bilder/holzbg.gif') no-repeat 0 0; }

 

[Monkeycel]

Wow ich bin unendlich blöd und unendlich dankbar, dass du mich drauf hingewiesen hast.
War echt dieses simple Problem.
Danke nächstes mal mache ich ein neues Thema auf, tut mir leid.
Ihr seid klasse, bis dann!