Zawartość
- Podstawowe kursory myszy
- Niestandardowe kursory myszy
- Zmiana stylu kursora za pomocą Javascript Inline
- Gra z funkcjami
Zmiana kursora myszy to prosty sposób dodawania efektów specjalnych do strony internetowej. Może to poprawić użyteczność, zapewniając użytkownikom dodatkowe pomoce wizualne, zwłaszcza na bardziej złożonych stronach, takich jak gry i interaktywne mapy. Możesz użyć Javascript, aby zmienić styl kursora w zależności od daty, pogody i wszystkiego innego. Technika używania Javascript, HTML i CSS do tworzenia dynamicznych stron internetowych jest znana jako DHTML (Dynamic HTML).
Podstawowe kursory myszy
Istnieje kilka standardowych kursorów myszy, których można użyć, modyfikując styl elementu lub treści strony. Nazwy są domyślne, celownik, ręka, ruch, tekst, czekanie i pomoc. Aby uzyskać więcej informacji, zobacz łącze „Właściwość kursora CSS” w sekcji „Zasoby”. Użyj CSS, aby zdefiniować kursor, który będzie wyświetlany podczas przechodzenia przez element w następujący sposób:
Krzyżówka
Niestandardowe kursory myszy
Oprócz podstawowych kursorów można użyć niestandardowych szablonów, ustawiając adres pliku obrazu jako styl kursora, jak w poniższym przykładzie:
Niestandardowy kursor
Nie wszystkie przeglądarki obsługują tę funkcję lub wszystkie typy plików. Na przykład Internet Explorer oczekuje plików z rozszerzeniem „.cur” lub „.ani”. Firefox nie akceptuje animowanych kursorów („.ani”) i oczekuje kursora podstawowego poza obrazem. Aby uzyskać najlepsze wyniki, wskaż plik kursora („.cur” lub „.ani”), plik obrazu (PNG, JPEG lub GIF) oraz podstawowy typ kursora jako kopię zapasową. Poniższy przykład wykorzystuje animowany kursor jako pierwszy wybór, prosty plik na drugim miejscu i podstawowy kursor jako ostatnią opcję. Przeglądarka wypróbuje wszystkie opcje, aż znajdziesz taką, której możesz użyć:
Niestandardowy kursor
Biblioteka Open Cursor w sekcji Zasoby oferuje kolekcje darmowych kursorów myszy.
Zmiana stylu kursora za pomocą Javascript Inline
Możesz zmienić styl CSS kursora za pomocą Javascript. Istnieje kilka atrybutów HTML związanych z działaniami myszy, których można użyć do wykonania kodu, klikając, przesuwając lub najeżdżając na element strony. Oto kilka przykładów:
onmouseover: Wskaźnik myszy przechodzi nad elementem. onmousedown: przycisk myszy jest wciśnięty. onmouseup: przycisk myszy jest zwolniony. onmouseout: Wskaźnik myszy opuszcza element. ondblclick: użytkownik kliknie dwukrotnie myszką.
W sekcji „Atrybuty” sekcji „Atrybuty” znajdziesz więcej atrybutów, których możesz użyć do dodawania akcji za pomocą Javascript.
Dodaj akcję do zdarzenia (na przykład „mouseover”), ustawiając kod, który chcesz uruchomić jako wartość atrybutu. W poniższym przykładzie kursor zmieni się na „pomoc” po najechaniu na link.
Pomoc
Gra z funkcjami
Czasami będziesz chciał zrobić więcej niż jeden atrybut. Pisząc wszystkie akcje w funkcji JavaScript, możesz umieścić cały kod na górze dokumentu HTML i zastosować go do dowolnego elementu, wykonując wywołanie w atrybucie zdarzenia. Poniższy kod zmienia kursor na element przekazany jako parametr „el”:
funkcja setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), celownik" GO}
Funkcja zostanie umieszczona w sekcji skryptu nagłówka dokumentu (między tagami
i ) lub w zewnętrznym pliku kodu, do którego odwołuje się ta sama część. Aby go użyć, wywołaj funkcję ze słowem kluczowym „this” z atrybutu zdarzenia w tagu HTML. Funkcja otrzyma odwołanie do elementu związanego ze zdarzeniem myszy i zmieni styl kursora. Na przykład, jeśli wskaźnik pominie następujący tekst, kursor zmieni się:Kursor zmieni się na tym łączu
Możesz także zmienić główny kursor, który będzie wyświetlany po najechaniu na dół strony. Następująca funkcja umożliwi zmianę kursora na typ wskazany w parametrze „curtype”:
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; break case case „zabronione”: document.body.style.cursor = „url (unavailable.ani), url (unavailable.png), domyślnie”; break GO case „default”: domyślnie: document.body.style.cursor = „url (arrow.cur), domyślne„ GO}}
Aby go użyć, nazwij go „ładowanie”, „zabronione” lub „domyślne” z atrybutu zdarzenia w tagu HTML. Na przykład poniższy przycisk zmieni kursor na „ładowanie” po kliknięciu:
Język JavaScript ma nieograniczoną funkcjonalność. Poniższy kod będzie odliczany i co sekundę zmieni kursor myszy na obraz powiązany z bieżącą wartością. Funkcja „setTimeOut” pozostawi funkcję zawieszoną na jedną sekundę przed ponownym wywołaniem i zaktualizowaniem licznika.
funkcja doCountdownCursor (count) {document.body.style.cursor = "url (" + liczba + ".ani), url (" + liczba + ".png) {setTimeout ("doCountdownCursor (" + liczba + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), domyślne" GO}}
Na stronie internetowej użyj funkcji, aby wyświetlić liczbę kursora myszy po kliknięciu przycisku na formularzu.