Coz kiedys siedzialem dosc powaznie w html, bylo minelo. Potrzebny bardzo mi jest 'skrypt' polegajacy na tym, ze jak najade na obrazek to zmienia sie na inny, jak zniego zjade znow poprzedni. Bardzo powszechny zreszta, byc moze jest to juz nawet java. Jesli ktos moglby poswiecic pare minut na zapodanie takiego kodu / linka / napisanie to bardzo wdzieczny bym byl. Ofc [+] jesli dla kogos jest to moneta przetargowa ...

__

miałem to gdzieś na dysku, ale zgubiłem po formacie :-/ w każdym razie do tego na pewno wystarczy html

__

Możliwa jest również kolejność odwrotna:




Atrybut style="filter: ..." określa początkowe ustawienie filtru; onmouseover="this.style.filter='...'" podaje zmianę po wskazaniu myszką; natomiast onmouseout="this.style.filter='...'" wywołuje powrót do ustawień początkowych po usunięciu wskaźnika myszy znad elementu .

__

< IMG SRC="obrazek.jpg" style="filter: Alpha(Opacity=50)" onmouseover="this.style.filter=''" onmouseout="this.style.filter='Alpha(Opacity=50)'" >

Możliwa jest również kolejność odwrotna:


< IMG SRC="obrazek.jpg" onmouseover="this.style.filter='Alpha(Opacity=50)'" onmouseout="this.style.filter=''" >

Atrybut style="filter: ..." określa początkowe ustawienie filtru; onmouseover="this.style.filter='...'" podaje zmianę po wskazaniu myszką; natomiast onmouseout="this.style.filter='...'" wywołuje powrót do ustawień początkowych po usunięciu wskaźnika myszy znad elementu .

http://www.kurshtml.boo.pl/index.php

__

Ok, krótki i chaotyczny przepis jak to zrobić bez javascriptu.

To wpisujesz w css:

#wow a {
display:block;
width: 100px;
height: 100px;
background: transparent url(menu.jpg) no-repeat bottom right;
}

#wow a:hover {
display:block;
width: 100px;
height: 100px;
background: transparent url(menu.jpg) no-repeat top left;
}

To w html:
< a href="" id="wow">< img src="przezroczysty.gif" alt="przeźroczysty obrazek" />< /a>

Załóżmy, że chcesz żeby po najechaniu na obrazek o wielkości 100x100 pojawiał się inny obrazek o tym samym rozmiarze. W tym celu:
1. tworzysz jpg/gif/cokolwiek o rozmiarach 100x200 pikseli
2. na górze wklejasz to co ma się wyświetlać po najechaniu kursorem, na dole to co ma być wyświetlone standardowo

Po najechaniu kursorem na link "background" przestawia się w ten sposób, że widać tylko górne 100 pikseli obrazka. Cała ta akcja po to, żeby wszystkie obrazki załadowały się od razu.
Można to zrobić "nie dla linku", ale wtedy pojawiają się z trudności z Internet Explorerem

__

Tego rozwiazania nie stosuj, blacktyger. Ani nie jest najprostsze, ani najoptymalniejsze, ani cross-browser. Nie wszystkie przegladarki obsluguja ten filtr, stary explorer na pewno nie. Poza tym uzycie tego filtru jest w tym przypadku glupie i niepotrzebne - daje on 50% przezroczystosci, a nie o to ci chodzilo. Uzywajac juz do tego js, trzebaby uzyc atrybutu src, a nie filtru.

__

Rozwiazanie z uzyciem js (bezpieczne dla wiekszosci popularnych przegladarek, jednak ie wywali ostrzezenie przed js):


< img src="obrazek1.gif" onmouseover="this.src='obrazek2.gif'" onmouseout="this.src='obrazek1.gif'" alt="Opis obrazka/linka" />

__

I to jest bardzo ciekawe, sprytne i optymalne rozwiazanie Poza tym uzywa css, ktore nalezy do bardzo polecanych standardow netowych.

Implementacja jednak jest lekko zwalona (nie dziala), bo Lukin zrobil literowke, a poza tym moze byc troche zoptymalizowana pod wzgledem ilosci kodu. Oto poprawniejsza (i dzialajaca) wersja samego style-sheeta:

a#wow {
display:block;
width: 100px;
height: 100px;
background: transparent url(menu.bmp) no-repeat bottom right;
}

a#wow:hover {
background-position: top left;
}

Zmienily sie dwie rzeczy: druga definicje, jako ze uzywa pseudo-klasy pierwszego przypadku, mozna skrocic, piszac tylko roznice - w tym wypadku pozycje tla (zmienilem ja przy okazji z bottom right na bottom left, co wydaje mi sie bardziej intuicyjne). To jednak pierdola i nie powoduje zadnych nieporozumien. Wazniejsza jednak byla ta literowka Lukina- w pospiechu napisal odwrotnie, zamiast a#wow, #wow a, co oznaczalo "element o tagu a bedacy potomkiem elementu o id wow", a chodzilo nam o "element o tagu a oraz id wow". Przez to przyklad nie dzialal.

Aha, wypowiedz Lukina o tym, ze warto tu zastosowac tag a, zamiast img, jest jak najbardziej sluszna. Przy okazji: z kodu html mozna zupelnie wywalic tag img, jest on calkowicie zbedny. Wystarczy napisac:

< a href="#" id="wow" >< /a >

(testowalem pod ie oraz ff, jesli ktoras z moich zmian psuje cos w innych przegladarkach to mam nadzieje, ze Lukin mnie i nas oswieci )

__

Skrypt Lukina jest swietny, bardzo pomyslowy, ale na chwile obecna w zupelnosci wystarczy mi #6. Dzieki wielkie ;*.

__