Przycisk na 2 gifach?

[fiban]

Sprawa banalnie prosta, przynajmniej przy zastosowaniu Java Script'u, komplikuje sie przy CSSie, mianowicie:
Mam tabele, podzielona na 7 komorek, w ktorych maja znajdowac sie przyciski (gify), w HTMLu bez problemow laduje do komorki gifa, jednak za diabla nie moge tego zronbic w CSSie, chce, zeby gif podstawowy wyswietlal sie bez przerwy, nie dziala polecenie

Kod: Zaznacz cały

backgroud-image

, a po najechaniu mysza ma wyswietlac sie drugi gif

Kod: Zaznacz cały

a:hover

, jak zbudowac kod, bo ja juz od parunastu godzin nie moge sobie z tym poradzic.


Za wszelka pomoc bede dozgonnie dzwieczny.

Pozdrawiam

Fiban

[fiban]

Aby sytuacja była zupełnie jasna:
znacznik <td> w index.html wygląda następująco <td class="przycisk1">
a fragment kodu odpowiadający temu znacznikowi w css wygląda nastepująco:

Kod: Zaznacz cały

td.przycisk1{
                                  background-image: url("gify/linki_1.gif");
                                  width: 80px;
                                  height: 25px;
                                  }

                   a:hover {
                                   background-image: url("gify/linki_2.gif");
                                   width: 80px;
                                    height: 25px;
                                   }

drobne zmiany tego kodu już przetestowałem, wogóle nic sie nie dzieje, inne style sa ok i działają jak należy.

[Calif]

Można się na CSS bawić w efekt Rollover.
Ale myślę, że ten sposób będzie łatwiejszy i czytelniejszy

Kod: Zaznacz cały

<a href="dokument.html">
<img src=" obrazek1.gif " onmouseover="this.src='obrazek2.gif ' " onmouseout="this.src='obrazek1.gif ' " style="border:0px;">
</a>

Myślę, że specjalnego komentarza nie trzeba do tego kodu.
Powodzenia.

P.S. Korzystaj z funkcji Zmień by edytować swój post

[fiban]

Wielkie dzięki za pomoc, powyższy przykład działa, choć chciałbym, żeby podobne, bezproblemowe rozwiązanie istniało w CSSie.

Pozdrawiam

[viraptor]

znacznik <td> wygląda następująco <td class="przycisk1">
css wygląda nastepująco:

Kod: Zaznacz cały

td.przycisk1{ ...........
                   a:hover { ...........

Jeśli rzeczywiście używasz takiego stylu, to raczej chodziło ci o td.przycisk1 i td.przycisk1:hover, a nie a:hover. Jeśli IE z tego co wiem nie obsługuje hover dla niektórych elementów (np. td), ale jeśli używasz <a>, to może masz możliwość wypełnić całą komórkę i w css'ie dać a.przycisk1 i a.przycisk1:hover ?

[fiban]

Można by z tym pokombinować, gdyby nie jeden problem, mianowicie wogóle nie reaguje u mnie definicja:

Kod: Zaznacz cały

{
background-image: url(gify/historia_1);
}

przypisana do znacznika <td> w index.html
która jest umieszczona w CSSie, nie mam pojęcia od czego to zależy, wyniki sprawdzam na IE6.

[viraptor]

Heh - no tak - w IE reaguje na :hover tylko elemenct <a>. Pozostaje czekać na v.7, która podobno wreszcie ma mieć poprawioną obsługę css'a, a póki co używać javascriptu.