Forum PHP.pl > [CSS]rollover i dziwne zachowanie opery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]rollover i dziwne zachowanie opery

nieraczek

24.07.2009, 05:50:12

Chcę zrobić efekt rollover z wykorzystaniem css dla obrazka będącego jednocześnie linkiem - najpierw widoczny jest obrazek img_1, a po najechaniu na niego kursorem obrazek img_2. Nie wiem czemu, ale tylko w Operze jak pierwszy raz najeżdżam kursorem na obrazek img_1 to on znika i nie pokazuje się obrazek img_2 - nie widać w tym miejscu żadneg obrazka, jak następnym razem najeżdżam kursorem na obrazek img_1 to już wszystko działa poprawnie, w jego miejscu jest wyświetlany obrazek img_2. Wystarczy jednak wyczyścić historię przeglądania w Operze i sytuacja się powtarza. Takie coś ma miejsce tylko w Operze i tylko gdy pierwszy raz najeżdżam na obrazek z efektem rollover.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">  
<head>    
  <style type="text/css">
    .klasa
    {
    	display: block;
    	height: 25px;
    	width: 100px;
    	background-image: url("skorka_pomaranczowa/images/img_1.jpg");
    }
 
    .klasa:hover
    {
      background-image: url("skorka_pomaranczowa/images/img_2.jpg");
    }  
 
   </style>
  </head>  
 
  <body>    
   <a class="klasa" href="#"></a>
</body>
 
</html>
[HTML] pobierz, plaintext

Czy wie ktoś dlaczego ?

Pawel_W

24.07.2009, 05:54:16

jeżeli jest to duży obrazek to może po prostu tyle się ładuje, skoro znika po wyczyszczeniu cache

nieraczek

24.07.2009, 06:02:22

nie, jest mały - ma 100x25 px - takie same jego wymiary ustawiłem zresztą w css'ie w klasie .klasa

ayeo

24.07.2009, 06:41:48

Witam!

Dobrą praktyką jest robienie 2 wersji buttona (regular i hover) w jednym pliku. W stylu (na hover) zmieniamy tylko background-position. Rozwiązuje to problem mrugania i doładowywania grafiki (przeglądarka pobiera tylko te pliki, które zamierza wyświetlić).

Pozdrawiam!

nieraczek

24.07.2009, 08:10:35

ayeo ok, ale mimo wszystko ciekawi mnie z czego wynika mój problem z pierwszego postu, wyjątkowo dziwny problem

ayeo

24.07.2009, 08:13:44

Witam!

Nie wiem z czego szczerze mówiąc. Najeżdżasz na button, JS zamienia zawartość na obrazek, którego nie ma. Przeglądarka wprowadza modyfikacje na stronie i pobiera obrazek. Po pobraniu już nie odświeża buttona. Spróbuj dać te alternatywne grafiki od razu na stronie. Position absolute, left - 10000px

Taki hack, ale od razu je załaduje

Pozdrawiam!

Spawnm

24.07.2009, 08:16:58

Tak się dzieje nie tylko w operze , wszystkie przeglądarki tak mają.
Po 1 najechaniu jeśli dłuższą chwilę odczekasz grafika się załaduje , jednak jest to bez sensu.
Dlatego warto zrobić tak jak pisał ayeo

nieraczek

24.07.2009, 11:12:07

no wlasnie to sie dzieje TYLKO w Operze, czekanie nic nie daje, dziwne ;]

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.