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 buttonwięcej podobnych podstron