Ten post nauczy Cię:
- Co to są mapy obrazów HTML?
- Jak tworzyć mapy obrazów w dokumencie HTML?
- Jak utworzyć mapę obrazu połączoną z inną stroną?
Co to są mapy obrazów HTML?
Mapa obrazu to obraz z obszarami, które można kliknąć. Aby utworzyć mapę obrazu w formacie HTML, „
Składnia
Składnia służąca do określania map obrazów w dokumencie HTML jest opisana poniżej:
< img źródło = „obrazy/img1.jpg” wszystko = 'laptop' użyj mapy = „#przestrzeń kliknięcia” >
< mapa imię = „przestrzeń kliknięcia” >
< powierzchnia kształt = „prosto” współrzędne = '224,37,422,312' href = „laptop.html” >
< / mapa >
„
- “ źródło ” określa ścieżkę obrazu.
- “ wszystko ” pokazuje alternatywny tekst, gdy nie można załadować obrazu.
- “ użyj mapy ”, aby umożliwić klikanie obszarów obrazu. Aby utworzyć łącze, jego wartość musi być taka sama jak klasa lub id elementu „
”.
„
- “ kształt ” określa rozmiar obszaru kodu HTML „
' element. - “ współrzędne Atrybut ” określa współrzędne klikalnego obszaru.
- “ href ” określa adres URL źródła.
Jak tworzyć mapy obrazów w dokumencie HTML?
Aby utworzyć mapę obrazu w dokumencie HTML, zapoznaj się z podanymi instrukcjami:
- W HTML dodaj „
” element i przypisać klasę „ mapa obrazu ”. - W obrębie tego elementu div dodaj „
”, aby dodać obraz powiązany z omówionymi powyżej atrybutami. - Następnie dodaj kod HTML „
” i przypisz mu „ przestrzeń kliknięcia ' imię. - Zwróć uwagę, że „ użyj mapy ” atrybut ma przypisaną nazwę “ #przestrzeń kliknięcia „wskazując na” imię ” znacznika „
- W środku dodaj „
” tag z powyższymi atrybutami:
< img źródło = „obrazy/img1.jpg” wszystko = 'laptop' użyj mapy = „#przestrzeń kliknięcia” >
< mapa imię = „przestrzeń kliknięcia” >
< powierzchnia kształt = „prosto” współrzędne = '224,37,422,312' href = „laptop.html” >
< / mapa >
< / dz >
Przejdźmy do sekcji CSS, aby dostosować rozmiar obrazu.
Styl „” w CSS
Skorzystaj z opcji „ .obraz-mapa ” klasa, aby uzyskać dostęp do „
.obraz-mapa {
szerokość : 700 pikseli;
margines: automatyczny;
}
Oto opis wspomnianych właściwości CSS:
- „ szerokość ” określa szerokość elementu div.
- „ margines ” dodaje więcej miejsca wokół elementu.
Element stylu „img”.
.image-map img {
szerokość : 100 %;
}
Zobacz, współrzędne obszaru określone w „ współrzędne ” są teraz klikalne:
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 kolejną stronę HTML z rozszerzeniem „ .html ”, wykonując czynności wymienione poniżej:
- W naszym przypadku nadajemy mu nazwę „ laptop.html ”.
- Dodaj element div i przypisz mu klasę „ laptop-img ”.
- Następnie umieść obraz za pomocą „
- Następnie określ akapit za pomocą „ ' element:
< dz klasa = „laptop-img” >
< img źródło = '/obrazy/laptop.jpg' szerokość = „400 pikseli” >
< p >Laptop to przenośny komputer, który można przenosić i używać w różnych ustawieniach.< / p >
< / dz > W CSS określ następujące właściwości CSS dla „ laptop-img ' klasa:
.laptop-img {
szerokość : 500 pikseli;
margines: automatyczny;
}
Wyjście
Teraz połączymy „ laptop.html „strona do obrazu” ”, jak pokazano poniżej:
< powierzchnia kształt = „prosto” współrzędne = '310,57,590,470' href = „laptop.html” > Wyjście
Udało nam się dowiedzieć, czym są mapy obrazkowe i jak są one powiązane z innymi źródłami.
Wniosek
Kod HTML „
Skorzystaj z opcji „ .obraz-mapa ” klasa, aby uzyskać dostęp do „
szerokość : 700 pikseli;
margines: automatyczny;
}
Oto opis wspomnianych właściwości CSS:
- „ szerokość ” określa szerokość elementu div.
- „ margines ” dodaje więcej miejsca wokół elementu.
Element stylu „img”.
.image-map img {szerokość : 100 %;
}
Zobacz, współrzędne obszaru określone w „ współrzędne ” są teraz klikalne:
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 kolejną stronę HTML z rozszerzeniem „ .html ”, wykonując czynności wymienione poniżej:
- W naszym przypadku nadajemy mu nazwę „ laptop.html ”.
- Dodaj element div i przypisz mu klasę „ laptop-img ”.
- Następnie umieść obraz za pomocą „
” element i skojarzyć „ źródło ' oraz ' szerokość ” atrybuty. - Następnie określ akapit za pomocą „ ' element:
< img źródło = '/obrazy/laptop.jpg' szerokość = „400 pikseli” >
< p >Laptop to przenośny komputer, który można przenosić i używać w różnych ustawieniach.< / p >
< / dz >
W CSS określ następujące właściwości CSS dla „ laptop-img ' klasa:
.laptop-img {szerokość : 500 pikseli;
margines: automatyczny;
}
Wyjście
Teraz połączymy „ laptop.html „strona do obrazu”
Wyjście
Udało nam się dowiedzieć, czym są mapy obrazkowe i jak są one powiązane z innymi źródłami.
Wniosek
Kod HTML „