Zazwyczaj do organizowania nawigacji służą strzałki graficzne na stronach internetowych. Kliknięcie takiego wskaźnika powoduje przejście do innej strony lub do innej sekcji bieżącej strony. Czasami są z nimi powiązane pewne akcje - podświetlenie zawartości pola tagu, uruchomienie skryptu JavaScript itp. Aby podkreślić, że ta strzałka jest elementem aktywnym, użyj efektu „podświetlenia”, tj. zmiany wyglądu po najechaniu myszą.
Niezbędny
Podstawowa znajomość języków HTML i CSS
Instrukcje
Krok 1
Określ, który mechanizm wdrażania podświetlania strzałek jest dla Ciebie najlepszy. Jest ich kilka, dwa proste są podane w kolejnych krokach tej instrukcji. Obaj używają pseudoklasy CSS hover. Gdy kursor myszy znajduje się nad elementem graficznym (strzałką), styl opisany w tej pseudoklasie jest do niego stosowany, a przez resztę czasu styl ten nie jest aktywny. Dla obu opcji opisanych poniżej można użyć tego samego kodu HTML kod, ale różne opisy stylów. Kod strzałki w źródle strony można zapisać w następujący sposób: Atrybut id określa identyfikator linku (arrowA), za pomocą którego przeglądarka określi, który z opisów stylów należy do niego zastosować.
Krok 2
Pierwsza opcja będzie wymagała przygotowania dwóch zdjęć strzałek - z podświetleniem i bez. Zapisz je do plików o nazwach takich jak odpowiednio arrON.
a # strzałkaA, a # strzałkaA: odwiedzona {
Blok wyświetlacza;
wysokość: 30px;
szerokość: 100px;
tło: url (arrOFF.gif) bez powtórzeń;
granica: 0;
}
a # strzałkaA: najedź {
tło: url (arrON.gif) bez powtórzeń;
granica: 0;
}
Pierwszy blok zawiera wymiary strzałki (wysokość: 30px; szerokość: 100px;) - zastąp je wymiarami przygotowanych zdjęć strzałek.
Krok 3
Druga opcja pozwala poradzić sobie tylko z jednym plikiem obrazu. Musisz umieścić w nim oba obrazy strzałki - zarówno podświetlone, jak i nieaktywne. Możesz umieścić je obok siebie, możesz jeden nad drugim. W przykładowym kodzie przyjmiemy, że podświetlona strzałka znajduje się pod nieaktywną, a plik nosi nazwę arr.gif. Ten obrazek, podobnie jak w poprzedniej wersji, służy jako tło dla linku. Ponieważ wymiary obiektu są wskazane w opisie stylu, cała reszta tła (podświetlona strzałka), która do nich nie pasuje, nie będzie widoczna dla internauty. W opisie najechania w pseudo-stylu określone jest przesunięcie w pozycjonowaniu obrazu tła, więc po najechaniu kursorem na link widoczna będzie inna sekcja, a teraz pasywna strzałka pojawi się „poza ekranem”.
a # strzałkaA, a # strzałkaA: odwiedzona {
Blok wyświetlacza;
szerokość: 100px;
wysokość: 30px;
tło: url (arr.gif) bez powtórzeń;
granica: 0;
}
a # strzałkaA: najedź {
tło: url (arr.gif) bez powtórzeń 31px;
granica: 0;
}
Nie zapomnij też zmienić rozmiaru tutaj.
