[CSS] Problem z :hover

Dla specjalistów Webmastering
#1

Witam!

Mam kolejny problem z efektem rollover w css otóż gdy najadę na link (obrazkowy) to ten drugi obrazek musi się załadować i trzeba czekać, wtedy jest pustka i to nie ładnie wygląda…

moje linki css:

#home {

	background:url(img/home.gif);

	width:74px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}	

#home:hover {

	background:url(img/home_a.gif);

	width:74px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}


#omnie {

	background:url(img/omnie.gif);

	width:100px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}

#omnie:hover {

	background:url(img/omnie_a.gif);

	width:100px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}


#kontakt {

	background:url(img/kontakt.gif);

	width:105px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}

#kontakt:hover {

	background:url(img/kontakt_a.gif);

	width:105px;

	height:63px;

	background-repeat:no-repeat;

	float:left;

	}

Wie ktoś jak to zrobić żeby nie było przerwy między jednym a drugim obrazkiem ?

Pozdrawiam

#2

Połącz obie grafiki w jedną i zastosuj

background-position
#3

nie wiem co masz na myśli coś dokładniej, jak by to wyglądało ?

Pozdrawiam

#4

Zamień na chwilę swój kod na ten podany poniżej (dla przykładu)

#home {

   background:url('img/home.gif');

   width:74px;

   height:63px;

   background-repeat:no-repeat;

   float:left;

   }   

#home:hover {

   background:url('img/home.gif');

   background-position: 5px 5px;

   width:74px;

   height:63px;

   float:left;

   }

Gdzie home.gif to połączona grafika home.gif z home_a.gif (np. jedna pod drugą). Czasami lepiej jest operować na ujemnych wartościach background-position.

#5

Jak to zrobić, jakoś w programie graficznym, czy jak ? :slight_smile:

Jak zamieniłem kod to obrazek home po prostu po najechaniu zmienił swoją pozycje…

Pozdrawiam

#6

Tak :slight_smile:

I o to chodziło :slight_smile: Wczytujesz grafikę jako jedną całość ale wyświetlasz np. tylko jej górną część po najechaniu tło zmienia się na część dolną a efektu przeskoku brak.

#7

A jak ? :lol: (photoshop) ?

Pozdrawiam :slight_smile:

#8

Ja osobiście korzystam z innego rozwiązania - JS, dla przykładu

Chcę aby nie było przerwy w ładowaniu obrazków ob1_hover.jpg obraz ob2_hover.jpg

Piszemy:

Gotowe.

Ale użycie background-position jest równie dobre :slight_smile:

#9

Gdy mam możliwość zrobienia tego w CSS wole nie używać JS…

A więc wie ktoś jak połączyć dwa obrazki w jeden w PS ?

Pozdrawiam

@edit:

Sam do tego doszedłem :slight_smile:

Dzięki z pomoc, pozdrawiam

#10

Pozwolicie że się dołączę

#enter {

width: 107px;

height: 26px;

margin-top:19px;

margin-left:342px;

background-image: url(/enter.jpg);

background-repeat: no-repeat;

}

#enter:hover {

width: 107px;

height: 26px;

margin-top:19px;

margin-left:342px;

background-image: url(/enter.jpg);

background-repeat: no-repeat;

background-position: 0px 26px;

}

Ktoś wie co jest źle?

#11

spróbuj bez

background-repeat: no-repeat;
#12

Czemu dodajecie wpisy #enter:hover skoro kaleka IE obsługuje zdarzenia tylko dla atrybutu a :?

#13

Możesz zrobić tak jak powyżej napisał master of disaster (chodzi o #enter:hover) albo możesz pozmieniać na ujemne wartości background-position

background-position: 0px -26px;

Ale wtedy musisz przyjąć poszczególne współrzędne na nowo. A tak przy okazji jeżeli używacie tło dla jednej rzeczy to nie musicie pisać ciągle background-image: background-repeat: background-position: przecież można pisać skróconymi wersjami np.

background:url('xx.png') no-repeat 0 -26px #fff fixed;
#14

dzięki ale zrobiłem inaczej- też z hover- ale pierwszy obrazek jest w tle a 2 tylko w hover