act button TYMUVLTGS6IZLM2HHNEMZUD752ZGCVIMIXYX6OY











JavaScript w przykładach - OnMouseOver, czyli "Aktywny przycisk"














JavaScript   
w przykładach                
http://javascript.jest.o.k.pl















OnMouseOver, czyli "Aktywny przycisk"






To chyba najpopularniejszy rodzaj skryptu w Sieci. Obrazek który zmienia się, kiedy umieścisz nad nim kursor myszki. Może (a nawet musi, jeśli ma działać w Netscape'ie) służyć jako odsyłacz. Dodatkowo, możesz podać tekst, który wyświetlany będzie w pasku stanu przeglądarki.

To jest nowa, poprawiona wersja tego skryptu, mam nadzieję, że okaże się łatwiejsza w stosowaniu.







Instrukcja






Aby móc korzystać z tego skryptu musisz najpierw przygotować odpowiednią ilość wersji danego przycisku. Umieść je wszystkie w jednym katalogu i nadaj im nastepujące nazwy: nazwa_high.gif dla wersji, która będzie widoczna po najechaniu na przycisk myszą, oraz nazwa_norm.gif dla wersji "zwykłej". W miejsce "nazwa" wstaw ciąg znaków, który będzie identyfikował obrazek.

Następnie w nagłówku dokumentu (pomiędzy <HEAD> a </HEAD>) umieść następujący kod:

<script language="JavaScript" type="text/javascript">
<!--
// Niniejszy skrypt pochodzi z serwisu "JavaScript w przykladach"
// Copyright (C) 1999 Maciej Szczepaniak <maciek@wls1.ch.pwr.wroc.pl>

// Skrypt objety jest licencja GNU General Public License.
// Koniecznie przeczytaj pelna informacje o licencji pod adresem:
// http://javascript.jest.o.k.pl/archiwum.html#l


var ImgFolder = "katalog_z_obrazkami/";

function highlight(Nazwa, Info) {
eval("document.images[\"" + Nazwa + "\"].src = \"" +
ImgFolder + Nazwa + "_high.gif\"");
window.status = Info;
}

function normalize(Nazwa) {
eval("document.images[\"" + Nazwa + "\"].src = \"" +
ImgFolder + Nazwa + "_norm.gif\"");
window.status = "";
}

//-->
</script>




W miejsce katalog_z_obrazkami/ musisz wpisać nazwę katalogu, w którym znajdują się wszystkie obrazki, pamiętając o "/" na końcu. Jeśli obrazki znajdują się w tym samym katalogu, co strona, nie wpisuj nic (nawet "/").

Teraz pozostaje Ci tylko wstawić na stronę przyciski. Służy do tego taki kod:



<a href="Jakiś URL"
onMouseOver="highlight('nazwa', 'Wiadomość'); return true"
onMouseOut="normalize('nazwa'); return true">
<img src="nazwa_norm.gif" name="nazwa">
</a>




Zamiast "nazwa" podaj oczywiście taką nazwę, jakiej użyłeś(łaś) tworząc pliki graficzne.

Wiadomość to tekst, który pojawi się w pasku statusu przeglądarki.





[ Powrót na górę ]





Przykład








A oto i przykład zastosowania tego skryptu:








[ Powrót na górę ]







 




Szybki skok:


Instrukcja


Przykład


 


JavaScript:


Teoria


Przykłady


Licencja


Bannery:


- w pasku stanu


- w okienku


- w pasku tytułu


- na przycisku


- Dalekopis


Nawigacyjne:


- Aktywny przycisk


- Przekierowanie


- Replace


Podpowiadacze:


- Pasek stanu DHTML


- Dymki DHTML


- Podmiana grafiki


Cegiełki:


- Zegarek


- Losowy tekst


- Odliczanie do Y2K


Inne:


- Pogromca ramek


- Preload


- Inteligentny dialog


Warsztat


JS w akcji


Linki


 


O autorze:


E-mail


Strona domowa


 


Znajdź w JSwp:( Jak szukać? )


Aby otrzymywać informacje o aktualizacjach na tych stronach, podaj swój e-mail:


Wersja offline



















© 1998-2000 Maciej Szczepaniak







Wyszukiwarka

Podobne podstrony:
act button

więcej podobnych podstron