Rozważ przykład, jak wygląda mapa obrazu w html:

Gdy najedziesz kursorem myszy na obszar zielonego prostokąta, zobaczysz, że jest to link do „#green_link” (etykieta jest wybrana na przykład, możesz linkować do dowolnej strony w Internecie). Czerwony kwadrat ma odpowiednio „#red_link”, a niebieskie kółko ma odpowiednio „#blue_link”.

Kod tego przykładu:

img/primer-kartu-isobrazheniy-1.jpg"> !}

Jak widać na przykładzie kod nie jest aż tak skomplikowany. Przeanalizujmy tagi do tworzenia mapy linków obrazu.

Opis przykładu

1. Musisz utworzyć link do obrazu i karty . Na obrazku musisz odwołać się do mapy za pomocą atrybutu usemap="#primer1" . A poniżej musisz opisać kod karty.

Podczas tworzenia mapy linków atrybut usemap jest wymagany dla znacznika img.

2. Opis mapy składa się z wymaganego atrybutu name , który zostanie użyty do powiązania z obrazem.

3. Każdy element mapy jest opisany za pomocą tagu A, który określa typ obiektu za pomocą atrybutu kształtu (prostokąt, okrąg lub wielokąt) i jego współrzędnych.

Notatka

Regiony mogą się na siebie nakładać. W takim przypadku link będzie prowadzić do obiektu, który został opisany jako ostatni.

Atrybuty tagów

1. Atrybut shape="object_type" - określa typ obiektu. Może przyjmować następujące wartości:

koło - koło;
prostokąt - prostokąt;
poli - wielokąt;

2. Atrybut coords="wartości_współrzędnych"- określa położenie geometryczne obiektu i jego wymiary.

Punktem odniesienia obrazu jest lewy górny róg. Tych. jeśli określisz dopełnienie o wysokości 10, oznacza to 10 pikseli w dół.

W zależności od typu obiektu należy podać wartości współrzędnych w różnych formatach. Wszystkie wartości podane są w pikselach (nie trzeba wpisywać znaku px).

Dla typu okręgu: coords = (x,y,r) , gdzie x,y to współrzędne środka okręgu, a r to promień okręgu;
Dla typu rect: coords = (x1,y1,x2,y2) , gdzie x1,y1 to współrzędne lewego górnego punktu prostokąta, x2,y2 to współrzędne prawego dolnego punktu prostokąta;
Dla typu poli: współrzędne = (x1,y1,x2,y2,...,xn,yn), współrzędne x,y każdego punktu wielokąta są kolejno wskazane;

3. Atrybut href="adres_skoku"- ustawia link do przejścia (podobnie). Oprócz adresu skoku możesz użyć funkcji JavaScript do wykonania pewnych działań.

4. Atrybut target="wartość" - podobny do tagu definiuje akcję podążania za linkiem. Może przyjmować wartości:

_blank - otwiera stronę w nowym oknie
_self - ładuje stronę do bieżącego okna
_parent - ładuje stronę do ramki nadrzędnej
_top - anuluje wszystkie ramki i wczytuje stronę w pełnym oknie przeglądarki

5. Tytuł atrybutu = "(! JĘZYK: wskazówka" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Atrybut nohref - czyni obszar nieaktywnym. Używane, gdy obiekty nakładają się. Stosuje się go dość rzadko, ale czasami może być nieodzownym rozwiązaniem. Na przykład możesz uczynić mały okrąg wewnątrz dużego koła nieaktywnym.

Obszar nohref musi być na pierwszym miejscu.

Przykładowy kod:

Wykorzystanie mapy linków na obrazie ma miejsce tylko w wąskim zakresie zadań. Na przykład podczas tworzenia jakiegoś schematu lub mapy. W innych przypadkach użycie mapy do tworzenia menu i innych elementów graficznych wydaje się nierozsądne.

„Utworzyłem puste miejsce na umieszczenie linków do różnych stron internetowych w niektórych jego sekcjach (””)

Teraz, jeśli klikniesz na ryciny z podpisami, otworzą się odpowiadające im strony: profil, pamiętnik lub wszystkie posty z sekcji „Lekcje Photoshopa” (uwaga! po przeniesieniu bloga do WordPressa i przerobieniu go, linki nie praca! ale lekcja pozostaje aktualna!)

Aby obraz działał, napisałem coś takiego jak ten kod HTML:

Kod ten można wstawić w pole wiadomości (przy wciśniętym przycisku „Źródło”) lub w epigrafie...

Nawiasem mówiąc, są inne posty na ten temat:Co to jest HTML?kod HTML rysunków", "Picture-link” i tak dalej.

1. Współrzędne

Aby skomponować wskazany kod, przypomniałem sobie trochę geometrię :)

Układ współrzędnych: oś X - od góry do dołu, oś Y - od lewej do prawej
Aby ustawić współrzędne figury, musisz ustawić:
- kwadrat (lub prostokąt), którego boki są równoległe do osi - współrzędne dwóch przeciwnych kątów - X1, Y1 i X2, Y2
- wielokąt - współrzędne WSZYSTKICH narożników
- okrąg - współrzędne środka i promienia.

W moim przypadku okazuje się, że potrzebne są współrzędne punktów A, C - dla połączenia "Profil" (prostokąt), punkty D, E, F, G, H - dla połączenia "Dziennik" (wielokąt), Q i długość R - dla linku „Lekcje Photoshopa” (kółko). Wszystkie te liczby w kodzie HTML u góry są podświetlone na czerwono. Dodatkowo musisz znać rozmiar obrazu w pikselach (kolor zielony)

Nie ma potrzeby szczególnej dokładności, więc współrzędne można znaleźć za pomocą „linijki” w Photoshopie - aby to nazwać, wciskam Ctrl+R

Bardziej interesowało mnie, aby ktoś inny obliczył współrzędne. Po to biegnę MS Farba(Start - Wszystkie programy - Akcesoria - Farba) i otwórz w nim obraz. Po najechaniu na wybrane punkty w dolnym panelu pojawiają się ich współrzędne, które skrupulatnie zapisuję

2. Kod HTML

Mapy nawigacyjne są ustawiane według tagów

Znacznik mapy zawiera znaczniki , które definiują obszary geometryczne mapy rysunkowej i skojarzone z nimi odniesienia.

Wymyśliłem to w ten sposób - aby stworzyć mapę nawigacyjną potrzebujesz:

— Tagi opisu obrazu

— znaczniki mapy

— znaczniki obszaru

W moim przypadku wartości były następujące:

szerokość= „640” wysokość= „367”- wymiary obrazu
src="https://website/f02c73a3cd94.jpg" — URL obrazu na stronie
usemap="# obrazek"— warunkowa nazwa obrazu mapy (może być dowolny)
nazwa mapy= obrazek- Nazwa karty (w pełni jak wyżej)

Wartości dla obszarów linków - href - cel linku, shape - kształt obszaru i coords - współrzędne - odpowiadają trzem obszarom (obszarowi) na obrazie.

Prostokąt "Profil"

href="https://website/profile/" — adres strony profilu
shape="rect" - oznaczenie kształtu "prostokąt"
coords="235,61,472,117" — współrzędne punktów A (235,61) i C (472,117)

Wielokąt "Dziennik"

href="https://website/blog" — adres strony pamiętnika
shape="poly" - oznaczenie kształtu "wielokąt"
coords="235,118,362,118,474,152,457,207,229,146" — współrzędne naroży wielokąta: punkty D (235,118), E (362,118), F (474 152), G (457 207) i H (229 146)

Koło „Lekcje Photoshopa”

href="https://website/showjournal.php?journalid=2447247&keywordid=929323" — URL strony z postami w sekcji Samouczki programu Photoshop
shape="circle" - oznaczenie kształtu "okrąg"
coords="551,198,65" — współrzędne okręgu: środek — punkt Q (551,198) i promień — R=65

3. Zakończ

Podstawiłem wszystkie otrzymane wartości do „systemu” kodu HTML dla obrazu mapy nawigacyjnej i otrzymałem:

To właśnie ten kod, gdy jest używany, „zamienia się” w obrazek z obszarami linków.

W przypadku szkolenia dostępna jest „lekka” łatwa opcja tworzenia sekcji linków - post „Trening: obszary linków na obrazie”

Jeśli znajdziesz błąd, zaznacz fragment tekstu i kliknij Ctrl+Enter.

Cześć przyjaciele. W tym filmie będziemy kontynuować rozmowę o mapach obrazów w HTML. Ale najpierw przypomnijmy sobie, o czym rozmawialiśmy w ostatnim filmie. Faktem jest, że te filmy są dość blisko ze sobą powiązane i aby zrozumieć, o co chodzi, musisz obejrzeć poprzednie filmy z sekcji obrazów.

W ostatnim samouczku wideo właśnie zaczęliśmy zapoznawać się z mapami obrazów w HTML. Przyjrzeliśmy się jednak, jak to powinno wyglądać w końcu za pomocą skryptów. Rozmawialiśmy trochę o współrzędnych. Tak je zdefiniujemy. Jak zapewne pamiętacie, zdecydowałem się na jedną z metod, jest to metoda wykorzystująca atrybut ismap, ponieważ moim zdaniem ta metoda wyznaczania współrzędnych jest najprostsza i najmniej skomplikowana, co oznacza, że nam odpowiada.

W rezultacie w ostatnim filmie zrobiliśmy link do zdjęcia. A potem zrobili serwerową mapę obrazu z obrazu, która pomoże nam w określeniu współrzędnych hotspotów.

Teraz nadszedł czas, aby zacząć tworzyć mapę obrazu w HTML. W tym filmie omówimy sporo informacji, zaczynając od teorii i przechodząc do praktyki.

Zacznijmy od przyjrzenia się dwóm innym tagom HTML, to są tagi oraz . To właśnie te znaczniki są przeznaczone do tworzenia mapy obrazu w dokumencie HTML.

znacznik HTML mapy.

Etykietka tworzy kontener, który będzie zawierał punkty aktywne. Podczas dodawania tagu w dokumencie HTML nie zobaczymy żadnych zmian na stronie, ponieważ ten tag nie dodaje żadnych informacji. Po prostu tworzy kontener, który będzie reprezentował początek mapy obrazu i jej koniec.

Ten tag ma wymagany atrybut nazwy. W którym musimy podać nazwę naszej mapy obrazu. Dodatkowo warto zauważyć, że ten znacznik nie jest elementem blokowym, co oznacza, że musi być zapisany wewnątrz elementu blokowego, na przykład znacznika akapitu lub uniwersalnego znacznika div.

znacznik HTML obszaru.

Etykietka odpowiedzialny za określenie hotspotów wewnątrz kontenera . To właśnie ten znacznik HTML definiuje aktywny obszar wewnątrz obrazu, wskazuje, jakiego kształtu używamy, wskazuje opis, używając wymaganego atrybutu alt, a co najważniejsze, używając atrybutu coords dla znacznika możemy określić współrzędne aktywnych obszarów mapy obrazu.

W tym miejscu chcę również wspomnieć o tym, o czym zapomniałem powiedzieć w samouczku wideo, że ten tag można łatwo zastąpić tagiem określającym hiperłącza w dokumencie HTML. Oznacza to, że tag . Jeśli pamiętasz, to jest na metce istnieją dokładnie te same atrybuty shape i coords , które zostały zaprojektowane specjalnie w celu określenia kształtu podstawowego i jego współrzędnych.

Wyznaczanie współrzędnych kwadratu, prostokąta, okręgu i wielokąta.

Również w tym samouczku wideo bardzo szczegółowo przeanalizujemy, jak poprawnie określić współrzędne dla konkretnej figury. Ile współrzędnych powinno być dla danego kształtu. Wynika to z faktu, że każda figura podstawowa ma swój własny zestaw współrzędnych i kolejność ich uzyskiwania.

Najpierw przyjrzymy się szczegółowo teorii wyznaczania współrzędnych kwadratu, koła, a na końcu wielokąta.

Następnie na przykładzie na żywo określimy współrzędne kwadratu i prostokąta. Następnie ustalamy współrzędne okręgu. I na koniec wskazujemy współrzędne trójkąta, który z kolei pełni rolę wielokąta.

Ogólnie rzecz biorąc, ten film będzie bardzo przydatnym przewodnikiem dla tych, którzy zainteresowali się tematem tworzenia map obrazów w HTML.

Samouczek wideo: Tworzenie mapy obrazu w formacie HTML.

Odnośnik HTML i inne materiały można i należy pobrać!

W następnym samouczku wideo w końcu przestudiujemy temat tworzenia map obrazów, porozmawiajmy o ostatnim atrybucie tagu usemap , który pomoże nam powiązać obraz z mapą obrazu. Przyjrzyjmy się jeszcze kilku przykładom map obrazów na żywo na różnych zdjęciach.

do dokumentu html.

Teraz dowiedzmy się, czym jest mapa obrazu.
Za pomocą mapy obrazu możesz sprawić, że po kliknięciu różnych obszarów tego samego obrazu przejdziesz na różne strony. Mapa obrazkowa jest również przez niektórych nazywana mapą nawigacyjną.
Rozumiem, że trudno to zrozumieć słowami, więc proponuję spojrzeć na przykład, jak mapa obrazowa wygląda na żywo.
Tylko zwróć uwagę: obraz jest ten sam, ale obszary i ścieżka przejścia są inne.

Nie bój się, to wcale nie jest trudne. Najważniejsze to zrozumieć teorię i skonsolidować ją z praktyką.

Cóż, zacznijmy od teorii.

Mapy obrazu (mapy nawigacyjne) są określone przez tag .
Etykietka - jest to pudełko, w którym umieszczane są tagi .
Etykietka służy do definiowania regionu geometrycznego z łączem dołączonym do każdego regionu.

atrybuty obszaru

1. atrybut kształtu
kształt — określa kształt obszaru ( prostokąt, koło, wielokąt).
Prostokąt - "prostokąt". Przykład: kształt= prostować";
koło - „koło”. Przykład: kształt= okrąg";
wielokąt - „wielokąt”. Przykład: kształt= poli"

2. atrybut współrzędnych
coords to lokalizacja kształtu geometrycznego.

Spójrzmy na przykład na geometryczny kształt prostokąta.

Wiesz już, że jeśli potrzebujesz kształtu prostokąta, musisz ustawić wartość w atrybucie kształtu « prostota ».

Punkt odniesienia zaczyna się od lewego górnego rogu obrazu, którego współrzędne wynoszą (0;0)

Musisz więc określić współrzędne obszaru roboczego w pobliżu lewego górnego i prawego dolnego narożnika prostokąta.

Na przykład dla prostokąta nr 1, weź następujące współrzędne:

x1=25, y1=36, x2=114, y2=98

Tak będzie wyglądał kod:

Jak dotąd wszystko jest w porządku. Ale teraz musimy połączyć obraz z mapą.
Aby to zrobić, wymyśl dowolną nazwę mapy, na przykład „karta1” i wpisz ją w tagu poprzez atrybut name.

Teraz połączmy mapę z obrazem. W tym celu używamy atrybutu usemap.
Przykład pisania:
usemap=" #nazwa_mapy"

W naszym przypadku będzie to wyglądać tak:

Teraz zbierzmy wszystko w całość i zapiszmy kolejne współrzędne do innego prostokąta nr 2 z takimi danymi (x1=153, y1=11, x2=219, y2=127).

Teraz spójrz na wynik. Kliknij na prostokąt #1 i na prostokąt #2

Najpierw musisz określić rodzaj obszaru. Aby to zrobić, wpiszmy wartość „kółko” w atrybucie kształtu.

Przejdźmy teraz do współrzędnych.
Aby utworzyć współrzędne dla okrągłego obszaru, musisz zapisać dane do środka (xy) i określić długość promienia (R).
Kolejność wpisywania współrzędnych dla atrybutu coords byłaby następująca:

Dla okręgu numer 1 weź następujące współrzędne:

x=46, y=48; i długość promienia - R=35

Teraz zbierzmy wszystko w całość i zapiszmy kolejne współrzędne okręgu nr 2 o danych x=158, y=75, R=53.

Mapa obrazu w HTML (mapy nawigacyjne). Lekcja nr 11

Teraz spójrz na wynik. Kliknij krąg #1 i krąg #2:

Obszar wielokątny to najtrudniejszy obszar na mapie nawigacyjnej.

Najpierw musisz określić rodzaj obszaru. Aby to zrobić, ustaw atrybut kształtu na wartość „poly»

Przejdźmy teraz do współrzędnych.

Kolejność wpisywania współrzędnych dla atrybutu coords byłaby następująca:

Wyjaśnienie:
x1,y1 - współrzędne pierwszego zakrętu;
x2,y2 - współrzędne drugiego rogu;
xN,yN - współrzędne ostatniego rogu

Oznacza to, że dla wielokąta numer 2 wygląda to tak:

Teraz nadaj mapie nazwę i połącz mapę z obrazem:

Teraz zbierzmy wszystko razem i zapiszmy więcej współrzędnych do sześciokąta nr 1 z następującymi danymi: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5= 54, y5=96, x6=16, y6=58.

Mapa obrazu w HTML (mapy nawigacyjne). Lekcja nr 11

Teraz spójrz na wynik. Kliknij wielokąt #1 i wielokąt #2:

Możliwość kombinacji

Zdarzają się sytuacje, w których konieczne jest jednoczesne użycie różnych obszarów na tym samym obrazie, na przykład koła i prostokąta:

Dodawanie za pomocą TITLE

Dla każdego obszaru wskazówki można napisać za pomocą atrybutu title.

Mapa obrazu w HTML (mapy nawigacyjne). Lekcja nr 11

Teraz spójrz na wynik. Najedź myszką na okrąg, a następnie na prostokąt:

To wszystko. Z mapą obrazu w HTML (mapa nawigacyjna) zrozumieliśmy to.

HTML - Lekcja 15. Mapy nawigacyjne - mapa

Wiele stron html używa tak zwanych map obrazów do organizowania linków. Dzięki takiemu podejściu robione jest zdjęcie i dołączane są linki do różnych jego obszarów. Najczęstszym przykładem są mapy turystyczne świata, kliknij na jego część z krajem i przejdziesz do strony poświęconej temu krajowi.

Takie mapy obrazów mogą być po stronie klienta i po stronie serwera. Łącza map klientów są przechowywane w samym dokumencie, a poprzez kliknięcie myszką przeglądarka sama określa, do którego obszaru należą współrzędne tego punktu i nawiguje do żądanego łącza.

W wersji serwerowej współrzędne te są najpierw przesyłane na serwer, gdzie są przetwarzane przez specjalny program, a dopiero po tym następuje połączenie.Oczywiście preferowane są mapy nawigacyjne klienta. Rozważymy je.

Na przykład wyobraźmy sobie, że jesteśmy sklepem AGD i w nagłówku naszej strony mamy następujący obrazek:

Zróbmy z tego mapę nawigacyjną, czyli Kliknięcie na lodówkę przeniesie Cię na stronę poświęconą lodówkom (z modelami, opisami i cenami), kliknięcie na odkurzacz i pralkę przeniesie Cię do odpowiednich stron.

Aby to zrobić, musimy opisać obszary na tym obrazku, które będą linkami. Do opisu takich obszarów używa się tagów. z tylko jednym parametrem Nazwa, który określa nazwę mapy łącza i jest używany później do łączenia się z tą mapą.

Nasza mapa musi być połączona z naszym zdjęciem, w tym celu w tagu trzeba dodać parametr użyj mapy, którego wartością jest nazwa naszej mapy po # (znaku krzyżyka):
Aby opisać określone obszary w tagach używane są tagi . Ten tag ma następujące opcje:

kształty- określa kształt terenu, może przyjąć następujące wartości:
- prostota- obszar w formie prostokąta,
- okrąg- powierzchnia w kształcie koła,
- poli- obszar w formie wielokąta,
- domyślna- cały teren.
cootds- ustala współrzędne wydzielonego obszaru:
- dla prostota ustawione są współrzędne lewego górnego i prawego dolnego narożnika prostokąta,
- dla okrąg ustawić współrzędne środka okręgu i promienia,
- dla poli ustaw współrzędne wierzchołków wielokąta w żądanej kolejności.
href- określa adres linku.
cel- używany podczas korzystania z ramek i określa ramkę, w której ma zostać załadowana strona.
Alt- ustawia tekst alternatywny dla obszaru.

Mamy trzy obszary, więc będą trzy tagi : pierwszy to prostokątny obszar wokół odkurzacza, drugi to prostokątny obszar wokół pralki, trzeci to obszar wokół lodówki.
Teraz musimy określić współrzędne tych obszarów. W rzeczywistości jest to najbardziej pracochłonny proces. W naszym przykładzie zdecydowaliśmy, że obszary będą prostokątne i znacznie ułatwiło nam to zadanie, ale wyobraź sobie, ile punktów musisz ustawić, na przykład, aby namierzyć kraj na mapie. Musimy jednak ustawić współrzędne lewego górnego i prawego dolnego narożnika trzech prostokątów.

Do tych celów zwykle używany jest jakiś program, na przykład Image Ready, który posiada specjalne narzędzie do śledzenia obszarów i automatycznie buduje opisy tych obszarów. Uwzględnienie pracy tych programów nie jest uwzględnione w kursie HTML, więc tutaj ustawimy współrzędne "na oko". Spójrz jeszcze raz na nasz obraz:

Nasz obraz ma szerokość 738 pikseli i wysokość 192 pikseli. Narysujmy linie wzdłuż granic naszych regionów i z grubsza określmy współrzędne. Jesteśmy teraz gotowi do dodania tych opcji do naszych tagów. .

Wynik:

Teraz nasze obszary stały się linkami (jeśli najedziesz kursorem myszy, zamieni się on w dłoń). Na tej stronie nie ma stron lodówki, więc linki prowadzą do tej samej strony, ale jeśli utworzysz właściwe strony, kliknięcie obszaru spowoduje nawigację.

To kończy nasze lekcje. Zapoznałeś się ze wszystkimi funkcjami języka HTML. Aby skonsolidować swoje umiejętności, zapoznaj się z dwiema lekcjami Tworzenie strony - układ tabelaryczny.

Na koniec trzeba powiedzieć, że w HTML są jeszcze dwa wspaniałe elementy - tagi

oraz . Tak naprawdę są to bardzo ważne tagi, ale aby zarządzać nimi bez CSS, uważam to za „perwersję”, więc są one szczegółowo opisane w