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">
<!--
// Ten skrypt pochodzi z serwisu "JavaScript w przykładach"
// Copyright (C) 1999 Maciej Szczepaniak <maciek@wls1.ch.pwr.wroc.pl>
//
// Koniecznie przeczytaj pełną informację o licencji pod adresem:
// http://javascript.jest.o.k.pl/archiwum.html#l
// Pamietaj, że nie możesz usuwać tej informacji, a jeśli
// zmodyfikujesz ten skrypt, musisz o tym tutaj napisać.
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
Nawigacyjne:
- Aktywny przycisk
- Przekierowanie
- Replace
Podpowiadacze:
- Pasek stanu DHTML
- Dymki DHTML
Biblioteczka:
- Odliczanie
- Wyświetlacz
- Zegarek
- Losowy tekst
- Pogromca ramek
- Podmiana grafiki
- Preload
- Pasek postępu
Bannery:
- w pasku stanu
- w okienku
- w pasku tytułu
- na przycisku
- Dalekopis
Inne:
- 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
Ostatnia aktualizacja serwisu: Sobota, 28 lipca 2001 r.© 1998-2001 Maciej Szczepaniak
Wyszukiwarka