• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation mit Hover und keinen Ladezeiten

Status
Für weitere Antworten geschlossen.
A

Andreas84

Neues Mitglied
Hallo,
ich habe mir vor ein paar Tagen eine Navigation für meinen Shop (Eastpak Schulranzen - Rucksäcke von Rucksack-Center.de) zusammengebastelt.

Als ersters wollte ich die Bilder, die beim hover angezeigt werden, vorladen lassen. Wenn man die Seite öffnet und dann einige Minuten warten und dann pber die Navi fährt, dauert es oft ca. 1 Sekunde, bis dann die "Hover"-Grafik angezeigt wird. Genau das ,ächte ich jedoch mit dem "Bilder-Vorladen" Code vermeiden.

Dieser sieht bei mir so aus:
Code: 
<body onload="BilderVorladen('img/topnavi/startseite_o.gif','img/topnavi/shop_o.gif','img/topnavi/forum_o.gif',
'img/topnavi/laden_o.gif','img/topnavi/unternehmen_o.gif','img/topnavi/zahlung_o.gif',
'img/topnavi/login_o.gif','img/topnavi/partner_o.gif','img/topnavi/kontakt_o.gif')">
Gibts eine Möglichkeit, wie man die Ladezeiten beim hover vermeiden kann?

Zudem ist der Code meiner Navi anscheinend nicht valide: Result for http://www.rucksack-center.de/ - W3C Markup Validator
Bin ein ziemlicher html Grünschnabel... Was stimmt denn da noch nicht?

Der Code meiner Navi:
Code: 
<a href="/"><div class="startlink" alt="Startseite"></div></a><a href="/shop/"><div class="shoplink" alt="Taschen und Rucksack Shop"></div></a><a href="/forum/"><div class="forumlink" alt="Trekking Forum"></div></a><a href="/thalmaessing.htm"><div class="ladenlink" alt="Laden"></div></a><a href="/"><div class="unternehmenlink" alt="Unternehmen"></div></a><a href="/shop/shop-info-zahlung-und-versand.html"><div class="zahlunglink" alt="Zahlung und Versand"></div></a><a href="/shop/shop-login.html"><div class="loginlink" alt="Login"></div></a><a href="/shop/shop-partner.html"><div class="partnerlink" alt="Partnerprogramm"></div></a><a href="/shop/shop-info-contact.html"><div class="contactlink" alt="Kontakt"></div></a>

Danke schon mal!

Gruß,
Andreas
 
<div> hat Atribut alt.
<a> darf nicht <div> umschließen.
& als &amp; schreiben
 
Schon überlegt, was wäre, wenn jemand JS deaktiviert hat?
Dann lädt es die Bilder nicht.


MfG; matibaski
 
ja es gibt eine möglichkeit, deine hover ohne ladezeiten zu gestalten
nimm einfach ein bild für deine navigation und positioniere die backgroundimages (bei hover background-position ändern)
 
ich nehme jetzt am besten nur den ersten Button zur Startseite her. Den hätte ich nun so eingebaut:

Code: 
<a href="/" alt="Startseite"><div  class="startlink"></div></a>

In meiner style.css Datei würde dann folgendes stehen:

Code: 
.startlink 
{
 background-image:url(../img/topnavi/startseite.gif); 
 width:77px; 
 height:18px;
}
.startlink:hover
{
 background-image:url(../img/topnav A>   q^ qi/startseite_o.gif); 
}

Nun wird aber bei diesem Code in FireFox keine "Hand" angezeigt, wenn man über den Link fährt. An was kann das liegen?
Zudem sollte der Button in der Navi anders aussehen, wenn man sich auf der Seite befindet. Wie kann ich das einbauen?

Danke schon mal!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben