Witam mam buton w css
.butt-1 {
display:inline-block;
height: 58px;
width:90px;
background:url(../images/b1a.gif) no-repeat;
margin-left: -3px;
}
.butt-1:hover {
background:url(../images/b1b.gif) no-repeat;
text-decoration:none;
}
jak pierwszy raz na niego klikam przy otwarciu strony buton dziwnie mruga - może wynika to z faktu wczytywania css - czy jest jakieś lekarstwo na to??
dodam tylko adres strony www.matplast.pl
Jest na to sposób, wczytywanie obrazków wcześniej, tak aby już były w pamięci. Zobacz na google i wybierz sposób jaki Ci najbardziej pasuje: http://www.google.co.uk/search?rlz=1C1CHKZ_enCZ431CZ431&ix=sea&sourceid=chrome&ie=UTF-8&q=js+preload+images :)
Po prostu obrazek nie jest załadowany zanim go nie najedziesz.
Dlaczego w ogóle wszystkie elementy menu i w ogóle wszystko-wszystko jest obrazkiem?
Od własnych czcionek masz Google Font, Cufon, cssowy @font-face (konwerwer dla IE) i podobne wynalazki.
Rozwiązania:
<img> w warstwę z position: absolute i ustaw top i left na jakieś konkretne wartości ujemne, np: -9999)b1a.gif i b1b.gif - złącz oba obrazki w jedno (ustaw jeden pod drugim) - potem zrobisz:.butt-1 { background: top url(../images/b1.gif) no-repeat; }
.butt-1:hover { background-position: bottom; }
i będzie dobrze
4. (ładne ale wolniej) - zostaw samo tło dla elementów menu - opisy zrób tekstem (gratis: +10 do pozycjonowania), wstaw im ładnego fonta jedną z metod opisanych wyżej. tło się powtarza wszerz i jest o stałej wysokości - możesz wstawić w zasadzie obrazek 1x116 px - i podobnie jak w pkt3 robisz, tylko jeszcze zamiast no-repeat zrób repeat-x.
Ale generalnie to naucz się składać strony. Do dobrze złożonej strony, która będzie wyżej w Google i będzie ładować się o wiele szybciej potrzebujesz (w Twoim przypadku) jakieś 10-15 obrazków.