Lekcja 6.3: Obrazki jako linki
Tworzenie klikalnych obrazków
W poprzednich lekcjach nauczyliśmy się tworzyć linki tekstowe za pomocą znacznika <a> oraz wstawiać obrazki za pomocą znacznika <img>. HTML pozwala również na połączenie tych dwóch elementów, tworząc obrazki, które działają jak linki. Oznacza to, że użytkownik może kliknąć obrazek, aby przejść do innej strony lub zasobu.
Jest to bardzo powszechna technika, używana np. w logotypach stron (kliknięcie logo przenosi na stronę główną), banerach reklamowych, galeriach zdjęć czy ikonach mediów społecznościowych.
Jak stworzyć obrazek jako link?
Aby obrazek stał się linkiem, wystarczy umieścić znacznik <img> wewnątrz znacznika <a>. Atrybut href znacznika <a> określi cel linku, a znacznik <img> dostarczy wizualnej reprezentacji linku.
<a href="https://www.example.com">
<img src="logo-example.png" alt="Logo Example - przejdź na stronę główną">
</a>W tym przykładzie:
<a href="https://www.example.com">...</a>- definiuje link prowadzący do strony example.com.<img src="logo-example.png" alt="...">- jest treścią linku. To właśnie ten obrazek będzie klikalny.
Przykład klikalnego obrazka (prowadzi do strony głównej tego kursu):
Ważność atrybutu `alt` w linkach obrazkowych
Kiedy obrazek jest używany jako link, atrybut alt znacznika <img> nabiera jeszcze większego znaczenia. Powinien on opisywać cel linku, a nie tylko to, co przedstawia obrazek.
- Dobry `alt` dla linku obrazkowego:
alt="Logo firmy XYZ - przejdź na stronę główną",alt="Pobierz raport PDF",alt="Profil firmy na Facebooku". - Słaby `alt` dla linku obrazkowego:
alt="Logo",alt="Ikona PDF",alt="Ikona Facebooka".
Dobry tekst alternatywny informuje użytkowników (w tym korzystających z czytników ekranu i wyszukiwarek), dokąd prowadzi link, nawet jeśli nie widzą obrazka.
Stylizacja linków obrazkowych
Domyślnie niektóre starsze przeglądarki mogły dodawać niebieską ramkę wokół obrazków będących linkami. Obecnie jest to rzadkość, ale jeśli chcemy mieć pewność, że ramka się nie pojawi, lub chcemy dodać własne efekty wizualne (np. zmianę przezroczystości po najechaniu), możemy użyć CSS.
/* Usunięcie domyślnej ramki (jeśli występuje) */
a img {
border: none;
}
/* Efekt lekkiego rozjaśnienia po najechaniu */
a:hover img {
opacity: 0.8;
}
/* Dodanie subtelnej ramki po najechaniu */
a:hover img {
border: 1px solid blue;
padding: 2px;
}Łączenie z innymi atrybutami linków
Obrazki jako linki mogą oczywiście korzystać ze wszystkich innych atrybutów znacznika <a>, takich jak target="_blank" (aby otworzyć link w nowej karcie) czy download (aby zainicjować pobieranie pliku).
<!-- Obrazek jako link otwierany w nowej karcie -->
<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">
<img src="ikona-wiki.png" alt="Odwiedź Wikipedię (otwiera w nowej karcie)">
</a>
<!-- Obrazek jako link do pobrania pliku -->
<a href="dokument.zip" download>
<img src="ikona-zip.png" alt="Pobierz archiwum ZIP">
</a>Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz stronę, na której umieścisz mały obrazek (np. ikonę domu). Uczyń ten obrazek linkiem prowadzącym do pliku index.html (strony głównej) w tym samym katalogu. Dodaj odpowiedni tekst alternatywny.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obrazek jako Link</title>
<style>
a img { border: none; } /* Usuwa ewentualną ramkę */
</style>
</head>
<body>
<h1>Nawigacja</h1>
<p>Kliknij ikonę, aby wrócić na stronę główną:</p>
<a href="index.php" title="Powrót na stronę główną">
<!-- Zastąp 'ikona-domu.png' rzeczywistą ścieżką do obrazka ikony domu -->
<!-- Poniżej użyto placeholdera z Wikimedia Commons -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Home_icon_blue.svg/50px-Home_icon_blue.svg.png"
alt="Strona główna"
width="50"
height="50">
</a>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz galerię miniaturek obrazków, gdzie każda miniaturka jest linkiem do większej wersji tego obrazka (może być ta sama strona lub osobne pliki).
- Znajdź ikony mediów społecznościowych (np. Facebook, Twitter) i stwórz linki obrazkowe prowadzące do odpowiednich profili, otwierane w nowej karcie. Pamiętaj o
rel="noopener noreferrer". - Dodaj efekt CSS (np. zmianę obramowania, cienia lub przezroczystości) pojawiający się po najechaniu myszką na obrazek będący linkiem.
Najczęściej zadawane pytania
Jak zrobić, żeby obrazek był klikalny?
Aby obrazek był klikalny (działał jak link), należy umieścić znacznik <img> wewnątrz znacznika <a>. Atrybut href znacznika <a> określi cel linku, a obrazek stanie się jego klikalną treścią.
Co wpisać w atrybucie alt dla obrazka będącego linkiem?
Tekst alternatywny (alt) dla obrazka będącego linkiem powinien opisywać cel tego linku, a niekoniecznie sam obrazek. Na przykład, dla logo linkującego do strony głównej, alt="Nazwa Firmy - strona główna".
Jak usunąć niebieską ramkę wokół obrazka-linku?
Chociaż nowoczesne przeglądarki rzadko dodają ramkę, dla pewności można użyć CSS: a img { border: none; }. Zapobiegnie to wyświetlaniu jakiejkolwiek ramki wokół obrazka wewnątrz linku.
Czy można używać target="_blank" dla linków obrazkowych?
Tak, linki obrazkowe mogą używać wszystkich atrybutów znacznika <a>, w tym target="_blank" do otwierania w nowej karcie (pamiętając o rel="noopener noreferrer") oraz atrybutu download do pobierania plików.
Czy tekst alternatywny jest ważny dla SEO linków obrazkowych?
Tak, tekst alternatywny jest bardzo ważny. Wyszukiwarki używają go do zrozumienia, dokąd prowadzi link, podobnie jak analizują tekst kotwicy (anchor text) w linkach tekstowych. Dobry alt pomaga w SEO.