Aby zmienić domyślną ikonę wskaźnika myszy na swojej stronie internetowej, możesz użyć CSS. Oto kroki, które powinieneś wykonać:
- Przygotuj ikonę: Najpierw musisz mieć plik graficzny ikony, którą chcesz użyć jako wskaźnik myszy. Najczęściej używane formaty to
.png
,.jpg
,.gif
, czy.cur
. Kursor może sobie pobrać gotowy np. z tej strony – https://www.iconarchive.com lub stworzyć własny na tej stronie – https://www.cursor.cc
Ikona powinna mieć wymiar 32×32 lub 128×128 px, bo inaczej jeśli będzie miała większy rozmiar, może się nie wyświetlić w przeglądarce internetowej. - Dodaj kod CSS: Możesz użyć reguły CSS
cursor
, aby ustawić nową ikonę wskaźnika. Oto przykład kodu:
/* Przykład zmiany wskaźnika na ikonę */ .custom-cursor { cursor: url('ścieżka/do/twojej/ikony.png'), auto; /* auto to zapasowy wskaźnik */ }
- Zastosuj klasę do elementu: Następnie musisz zastosować klasę do elementu HTML, którego chcesz użyć z nowym wskaźnikiem. Na przykład:
<div class="custom-cursor"> Najedź na mnie, aby zobaczyć nowy wskaźnik! </div>
- Testuj zmiany: Po dodaniu kodu do plików CSS i HTML, odśwież stronę, aby zobaczyć zmiany.
Przykład:
Oto pełny przykład HTML i CSS, który ilustruje, jak zmienić wskaźnik myszy:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zmieniony wskaźnik myszy</title> <style> .custom-cursor { cursor: url('ścieżka/do/twojej/ikony.png'), auto; /* Upewnij się, że ścieżka jest poprawna */ } </style> </head> <body> <div class="custom-cursor"> Najedź na mnie, aby zobaczyć nowy wskaźnik! </div> </body> </html>
Poniżej jak to będzie wyglądać w praktyce:
Najedź na mnie, aby zobaczyć nowy wskaźnik!
Ważne uwagi:
- Upewnij się, że plik ikony jest dostępny na serwerze i ścieżka do niego jest poprawna.
- Niektóre przeglądarki mogą mieć ograniczenia dotyczące rozmiaru i formatu ikon wskaźnika. Najlepiej, aby ikona miała rozmiar od 32×32 do 128×128 pikseli.
- Możesz także użyć różnych wskaźników dla różnych elementów, zmieniając klasę w zależności od potrzeb.