Mapy obrazu HTML

Często możesz odwiedzić strony internetowe, w których można znaleźć taki link: „”Odwiedź link, aby dowiedzieć się więcej". W rezultacie, jeśli klikniesz to, zostaniesz zabrany na inną stronę internetową. W ten sam sposób funkcja mapowania obrazów HTML umożliwia nam dodanie klikalnych linków do obrazów. Strona skieruje nas do innego źródła po kliknięciu tego określonego obszaru.

Ten post nauczy Cię:

• Jakie są mapy obrazu HTML?
• Jak tworzyć mapy obrazów w dokumencie HTML?
• Jak utworzyć mapę obrazu połączoną z inną stroną?

Jakie są mapy obrazu HTML?

Mapa obrazu to zdjęcie z obszarami, które można kliknąć. Aby zrobić mapę obrazu w HTML, „„Element jest wykorzystywany. Co więcej, jeden lub więcej ””Tagi są dodawane w elemencie„ ”, aby określić obszary.

Składnia

Składnia do określenia map obrazów w dokumencie HTML jest wspomniana poniżej:

„„„Element jest zdefiniowany za pomocą następujących atrybutów:

• "src”Określa ścieżkę obrazu.
• "Alt”Pokazuje alternatywny tekst, gdy obraz nie może załadować.
• "UsEmap”Jest określony, aby obszary obrazu były klikalne. Aby zrobić link, jego wartość musi być taka sama jak klasa lub identyfikator elementu „”.

„„”Element jest dodawany z następującymi atrybutami:

• "kształt”Określa rozmiar obszaru HTML”" element.
• "współrzędne”Atrybut określa współrzędne obszaru klikalnego.
• "Href”Atrybut Wyznacz adres URL źródła.

Jak tworzyć mapy obrazów w dokumencie HTML?

Aby utworzyć mapę obrazu w dokumencie HTML, sprawdź podane instrukcje:

• W HTML dodaj „”Element i przypisz klasę„Mapa obrazu".
• W ramach tej div dodaj „”Element do dodania obrazu powiązanego z wyżej rozpatrywanymi atrybutami.
• Następnie dodaj HTML „”Element i przypisz go„Clickspace" nazwa.
• Zauważ, że „UsEmap”Atrybut ma nazwę„#Clickspace„Wskazując„ ”nazwa„Atrybut znacznika„ ”.
• Wewnątrz dodaj „”Zagaduj z wyżej wymienionymi atrybutami:

Przejdźmy do sekcji CSS, aby dostosować rozmiar obrazu.

Styl „” w CSS

Użyj „.Mapa obrazu„Klasa, aby uzyskać dostęp do„”Element i zastosuj następujące właściwości CSS:

.Mapa obrazu
szerokość: 700px;
Margines: Auto;

Oto opis wspomnianych właściwości CSS:

• „„szerokość„Właściwość ustawia szerokość elementu div.
• „„margines„Obiekt dodaje więcej miejsca wokół elementu.

Element stylu „IMG”

.Image-Map IMG
szerokość: 100%;

Patrz, współrzędne obszaru określone w „współrzędne„Atrybut można teraz kliknąć:

W następnej sekcji dowiemy się, jak połączyć mapę obrazu z innym źródłem.

Jak utworzyć mapę obrazu połączoną z inną stroną?

Utwórz inną stronę HTML z rozszerzeniem „.html”Postępując zgodnie z poniższymi krokami:

• W naszym przypadku nadajemy mu nazwę „laptop.html".
• Dodaj element DIV i przypisz go klasę „laptop-img".
• Następnie umieść obraz za pomocą „„Element i powiązaj„src" I "szerokość”Atrybuty.
• Następnie określ akapit za pomocą „

  " element:

Laptop to przenośny komputer, który można przenosić i używać w różnych ustawieniach.

W CSS określ następujące właściwości CSS do „laptop-img" klasa:

.laptop-img
szerokość: 500px;
Margines: Auto;

Wyjście

Teraz połączymy „laptop.html„Strona do obrazu„„Element pierwszej strony. Aby to zrobić, określ adres URL strony do „Href„Atrybut elementu„ ”, jak pokazano poniżej:

Wyjście

Z powodzeniem dowiedzieliśmy się, czym są mapy obrazu i jak są one powiązane z innymi źródłami.

Wniosek

HTML "„Element jest wykorzystywany do utworzenia mapy obrazu lub obrazu z obszarami klikalnymi. Aby zdefiniować obszary klikalne obrazu, jeden lub więcej ”„Tagi są dodawane w elemencie„ ”. Ponadto atrybuty powiązane z znacznikiem „” to „kształt”,„współrzędne", I "Href". Ten post ilustruje, jak utworzyć mapy obrazów HTML za pomocą przykładu.