Antworten auf deine Fragen:
Neues Thema erstellen

Navigation aus Grafiken mit CSS und HTML erstellen

M

Monkeycel

Guest

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

Aktives Mitglied

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:
HTML:
<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

VonAllemEtwas

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/
 
M

Monkeycel

Guest

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.
 
Zuletzt bearbeitet von einem Moderator:
M

Monkeycel

Guest

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

Aktives Mitglied

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

Web Developer

#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.

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

Monkeycel

Guest

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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben