Korzystając z tej strony zgadzasz się z polityką prywatności i regulaminem.
Akceptuj
WebInside.plWebInside.plWebInside.pl
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
Szukaj
  • Kontakt
  • Forum
WebInside.pl © 2023.
Czytasz: Mapa odsyłaczy
Udostępnij
Zaloguj się
Powiadomienia
Aa
WebInside.plWebInside.pl
Aa
Szukaj
  • Strona główna
  • Aktualności
  • Technologie webowe
  • Publicystyka
  • E-marketing
  • Poradniki
  • AI
  • Technologie
  • Artykuły partnerskie
  • Więcej
    • Kontakt
    • Mapa strony
Masz już konto? Zaloguj się
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
WebInside.pl © 2023.
WebInside.pl > Technologie webowe > Mapa odsyłaczy
Technologie webowe

Mapa odsyłaczy

WebInside.pl
Ostatnia aktualizacja: 25.07.2003
WebInside.pl
Udostępnij
Udostępnij

Mapa odsyłaczy jest coraz częściej stosowana. Spowodowane jest to możliwością zrobienia odnośnika na wykonanej grafice. Definiując współrzędne możemy stworzyć odsyłacz o dowolnym kształcie.

Daje to nam nieograniczone możliwości stosowania tego typu odsyłacza. Poniżej przedstawię kod i trzy rodzaje kształtów, jakie można uzyskać stosując mapę odsyłaczy:

<img src=”podajemy nazwe obrazka” usemap=”#nazwa_mapy”>
<map name=”nazwa_mapy”>
<area shape=”kształt” coords=”współrzędne” href=”adres strony”>
<⁄map>

Gdzie jako „nazwa_mapy” wpisujemy dowolną nazwę pamiętając, aby była ona taka sama w pierwszej lini kodu jak i w drugiej.

W miejscu „kształt” możemy wpisać jeden z trzech kształtów:
– „rect” oznacza prostokąt
– „circle” oznacza okrąg
– „poly” oznacza obszar nieregularny

Jako „współrzędne” wpisujemy:
w przypadku prostokąta „x1,y1,x2,y2„
x1 oznacza współrzędną poziomą lewego górnego rogu prostokąta
y1 oznacza współrzędną pionową lewego górnego rogu prostokąta
x2 oznacza współrzędną poziomą prawego dolnego rogu prostokąta
y2 oznacza współrzędną pionową prawego dolnego rogu prostokąta
w przypadku okręgu „x,y,r„
x,y oznaczają współrzędne środka okręgu
r oznacza długość promienia
w przypadku obszaru nieregularnego „x1,y1,x2,y2,x3,y3,…„
współrzędne podajemy tak samo jak przy prostokącie (minimum trzy)

Natomiast jako „adres strony” wpisujemy stronę, do której nastąpi przełączenie.

Przykład mapy odsyłaczy:

to jest pierwszy link to jest drugi link to jest trzeci link

Dla lepszego zobrazowania przedstawię kod powyższej mapy:

<img src=”mapa.jpg” width=”340″ height=”113″ usemap=”#mapa” border=”0″>
<map name=”mapa”>
<area shape=”rect” coords=”15,15,95,95″ href=”strona1.html”>
<area shape=”poly” coords=”135,10,135,95,222,95″ href=”strona2.html”>
<area shape=”circle” coords=”282,57,42,” href=”strona3.html”>
</map>

Stosując mapę odsyłaczy powinniśmy pamiętać także o osobach, które wyłączają wyświetlanie grafiki w swoich przeglądarkach. Wówczas nie będą mogli oni odwiedzić stron, do których znajdują się odnośniki na mapie odsyłaczy. Mało, kto tak robi, ale dobrym zwyczajem byłoby umieścić także odsyłacze tekstowe. Nie powinniśmy także zapominać o wstawieniu w znaczniku area atrybutu alt=”z opisem strony”.

Może Cię zainteresować

Jak wybrać agencję do tworzenia strony internetowej w Warszawie?

Lovable – recenzja po 3 miesiącach. Cennik, opinie, kredyty, limity

Stanowisko web developera w 2026: co naprawdę przyspiesza pracę — i za co nie warto przepłacać

AI kontra klasyczne kreatory stron: kto tu naprawdę wygrywa?

Jak wybrać i zarejestrować domenę? Praktyczny przewodnik dla firm i osób prywatnych

WebInside.pl 2003-07-25 2003-07-25
Udostępnij ten artykuł
Facebook Twitter Kopiuj link Wydrukuj
Udostępnij
Poprzedni artykuł Automatyczne przejście między stronami
Następny artykuł Listy wyliczeniowe
Zostaw komentarz lub opinię

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

Najnowsze artykuły

Jak zwiększyć rozpoznawalność marki w całym mieście dzięki reklamie na tramwajach
E-marketing
person holding black iphone 4
Newsletter w małym sklepie internetowym. Jak zacząć, żeby pierwszy mail nie wylądował w spamie
E-marketing
Jak wybrać agencję do tworzenia strony internetowej w Warszawie?
Technologie webowe
person sitting while using laptop computer and green stethoscope near
Badania profilaktyczne w Warszawie – jaki pakiet zrobić raz w roku i gdzie się umówić
Artykuły partnerskie
Dlaczego skuteczność reklamy zależy również od tego, co dzieje się na stronie?
E-marketing
Lovable – recenzja po 3 miesiącach. Cennik, opinie, kredyty, limity
Technologie webowe
A smartwatch with a dark textured band and a colorful app icon display
Smartwatch jak mały komputer – dlaczego naprawa Apple Watch wymaga dziś specjalistycznej technologii?
Poradniki
Stanowisko web developera w 2026: co naprawdę przyspiesza pracę — i za co nie warto przepłacać
Technologie webowe
Close-up of gold and silver cryptocurrency coins on a digital trading chart.
Bybit po ataku za 1,5 miliarda dolarów: co giełda zmieniła i co sprawdzisz sam
Artykuły partnerskie
Odnowiony iPhone jako telefon testowy – dlaczego osoby z branży IT sięgają po refurbished zamiast nowego?
Artykuły partnerskie
banner
Chcesz umieścić swoją reklamę w portalu WebInside.pl?
Skontaktuj się z nami, a zaproponujemy interesujące formy reklamy.
Skontaktuj się

Inne polecane artykuły

Technologie webowe

Jak wybrać agencję do tworzenia strony internetowej w Warszawie?

3 min czytania

Lovable – recenzja po 3 miesiącach. Cennik, opinie, kredyty, limity

15 min czytania
Technologie webowe

Stanowisko web developera w 2026: co naprawdę przyspiesza pracę — i za co nie warto przepłacać

7 min czytania
a computer screen with the words the easy way to build marketplaces
Technologie webowe

AI kontra klasyczne kreatory stron: kto tu naprawdę wygrywa?

5 min czytania
Technologie webowe

Jak wybrać i zarejestrować domenę? Praktyczny przewodnik dla firm i osób prywatnych

5 min czytania
Technologie webowe

Komentarze w CSS – jak dodawać i do czego służą? Przykłady użycia

17 min czytania
Technologie webowe

Co to jest REST API i na jakich zasadach działa? Przewodnik dla początkujących

21 min czytania
Technologie webowe

Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding?

17 min czytania
//

WebInside.pl – portal technologiczny. Aktualności ze świata technologii, webmastering, marketing internetowy, AI, poradniki.

 

Partnerzy



Wszystkie kategorie

  • AI
  • Aktualności
  • Artykuły partnerskie
  • E-marketing
  • e(Biznes)
  • Poradniki
  • Publicystyka
  • Technologie
  • Technologie webowe

Ostatnio dodane

  • Jak zwiększyć rozpoznawalność marki w całym mieście dzięki reklamie na tramwajach
  • Newsletter w małym sklepie internetowym. Jak zacząć, żeby pierwszy mail nie wylądował w spamie
  • Jak wybrać agencję do tworzenia strony internetowej w Warszawie?
  • Badania profilaktyczne w Warszawie – jaki pakiet zrobić raz w roku i gdzie się umówić

Kontakt

Chcesz się z nami skontaktować? Jesteś zainteresowany reklamą lub artykułem sponsorowanym?

Skorzystaj z formularza kontaktowego lub napisz do nas na kontakt@webinside.pl

WebInside.plWebInside.pl
WebInside.pl © 2023 | Mapa strony | Forum | Polityka prywatności
Witaj ponownie!

Zaloguj się do swojego konta

Zapomniałeś hasła?