Mouseover-Fehler - Bild wird erst weiß, dann kommt richtiges Bild

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

ich hab folgendes Problem: habe eine Website erstellt, in der eine Bilder-Menüleiste enthalten ist. Die Bilder werden beim Mouseover mittels CSS ausgetauscht. Soweit klappt alles. Jedoch hab ich immer das Problem, dass bei jedem dieser Bilder beim 1. Mouseover zuerst eine weiße Fläche angezeigt wird, bevor das richtige Bild kommt. Das hat wohl auch nichts mit der Ladezeit zu tun, denn auch nach längerem Warten hab ich dieses Problem.

CSS:

[HTML]
styles:

.bild1 {
width:132px;
height:132px;
margin-right:4px;
float:left;
background:url(…/img/XXXX_1.jpg);
border-bottom:26px solid #E2001A;
}

.bild1:hover {
width:132px;
height:132px;
margin-right:4px;
float:left;
background:url(…/img/XXXX_2.jpg);
border-bottom:26px solid #cccccc;
color: #000000;
}

.bild1_active {
width:132px;
height:132px;
margin-right:4px;
float:left;
background:url(…/img/XXXX_1.jpg);
border-bottom:26px solid #cccccc;
color: #000000;
}

.link_mainmenue {
font-family: Arial, Helvetica, Verdana sans-serif;
font-size: 0.7em;
font-weight:bold;
height:19px;
text-decoration:none;
color: #FFFFFF;
padding-top:138px;
display:block;
text-align:center;

}

.link_mainmenue:hover {
font-family: Arial, Helvetica, Verdana sans-serif;
font-size: 0.7em;
font-weight:bold;
height:19px;
text-decoration:none;
color: #000000;
padding-top:138px;
display:block;
text-align:center;

}

.link_mainmenue_active {
font-family: Arial, Helvetica, Verdana sans-serif;
font-size: 0.7em;
font-weight:bold;
height:19px;
text-decoration:none;
color: #000000;
padding-top:138px;
display:block;
text-align:center;

}
[/HTML]

HTML:

[HTML]

Blindtext
[/HTML]

weiß einer von euch, woran das liegen kann?

2

Ich würde die Bilder „kleben“ und anschließend die bestimmte Stelle anzeigen und beim hover einfach das Bild nach links verschieben. Somit muss das Bild nicht nachgeladen werden.

.hoverbild {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 800px;
height:100px;
background: url(„bild.gif“) 0 0 no-repeat;
}

.hoverbild:hover {
background-position: -800px 0;
}