Jak zrobić odsyłacz obrazkowy w HTML?

Aby wykonać odsyłacz obrazkowy w HTML, należy umieścić obraz (znacznik <img>) wewnątrz znacznika odsyłacza (<a>). Dzięki temu po kliknięciu w obraz użytkownik zostanie przeniesiony do wskazanego miejsca – może to być podstrona, adres zewnętrzny, adres e-mail lub plik do pobrania.

Jak stworzyć odsyłacz obrazkowy – podstawowa składnia

<a href="adres_docelowy">
  <img src="adres_obrazka" alt="Opis obrazka">
</a>

Opis atrybutów –

• href – adres docelowy, np. „podstrona.html” lub pełny adres strony;
• src – ścieżka do pliku graficznego (obrazka);
• alt – opis alternatywny obrazka (wyświetlany, gdy grafika się nie załaduje lub jest odczytywana przez czytniki).

Przykład: Odsyłacz do podstrony

<a href="galeria.html">
  <img src="miniatura.jpg" alt="Przejdź do galerii">
</a>

Kliknięcie w miniaturkę przeniesie odwiedzającego do strony „galeria.html”.

Praktyczne zastosowania

Odsyłacz do strony zewnętrznej

<a href="https://www.google.com/">
  <img src="logo-google.png" alt="Google">
</a>

Kliknięcie przenosi na zewnętrzną stronę internetową.

Link do powiększonego obrazka (galeria miniatur)

<a href="duzy-obraz.jpg">
  <img src="miniatura.jpg" alt="Kliknij, aby powiększyć" width="150" height="150">
</a>

Kliknięcie w miniaturę otworzy duży obraz – powszechna technika w galeriach zdjęć.

Odsyłacz do wysłania e-maila

<a href="mailto:[email protected]">
  <img src="mail.png" alt="Napisz do nas">
</a>

Kliknięcie w ikonę otworzy nowe okno poczty z adresem e-mail.

Rozszerzenia i dostosowanie wyglądu

Usuwanie domyślnej ramki wokół obrazka

Niektóre przeglądarki mogą domyślnie wyświetlać ramkę wokół obrazka odsyłacza. Można ją usunąć przez atrybut style lub border:

<a href="strona.html">
  <img src="icon.png" alt="Powrót" style="border: 0;">
</a>

lub

<img src="icon.png" alt="Powrót" border="0">

Użycie style="border: 0;" jest zalecane przy współczesnych standardach.

Dodanie tytułu (dymka po najechaniu)

Atrybut title pozwala na wyświetlanie podpowiedzi po najechaniu kursorem –

<img src="shop.png" alt="Przejdź do sklepu" title="Odwiedź nasz sklep">

Uwagi designerskie i dostępnościowe

• alt – opis alternatywny obrazka powinien być zwięzły i zrozumiały, aby strona była dostępna dla osób korzystających z czytników ekranu oraz gdy obrazek się nie załaduje;
• title – atrybut title jest opcjonalny, lecz zwiększa użyteczność;
• dobrym zwyczajem jest zachowanie odpowiednich rozmiarów obrazów przez atrybuty width oraz height (lub poprzez CSS), aby zachować spójny wygląd strony.

Zaawansowane zastosowania

• Obrazkowy przycisk „do pobrania pliku” –

<a href="dokument.pdf" download>
  <img src="pdf.png" alt="Pobierz PDF">
</a>

• Umieszczenie kilku obrazkowych odsyłaczy w rzędzie lub kolumnie (np. do mediów społecznościowych):

<a href="https://facebook.com/profil">
  <img src="fb.png" alt="Facebook" style="border:0; width:32px;">
</a>
<a href="https://instagram.com/profil">
  <img src="insta.png" alt="Instagram" style="border:0; width:32px;">
</a>

Bezpieczeństwo i dobre praktyki

• pliki graficzne powinny być zoptymalizowane pod kątem wielkości, aby nie wydłużać czasu ładowania strony,
• testuj działanie odsyłaczy na różnych przeglądarkach i urządzeniach,
• unikaj stosowania zbyt dużych obrazków jako linków, aby nie dezorientować użytkowników.

Stosując powyższe zasady, można tworzyć funkcjonalne i estetyczne odsyłacze obrazkowe, które znacząco uatrakcyjniają strony internetowe i wpływają na ich intuicyjność.