HTML -bildekart

Ofte har du kanskje besøkt nettsteder der du kan finne en lenke som denne: “Besøk lenken for å lære mer”. Som et resultat, hvis du klikker på dette, blir du ført til et annet nettsted. På samme måte gjør HTMLs bildekartleggingsfunksjon oss i stand til å legge til klikkbare lenker til bilder. Siden vil lede oss til en annen kilde når du klikker på det spesifiserte området.

Dette innlegget vil lære deg:

• Hva er HTML -bildekart?
• Hvordan lage bildekart i HTML -dokumentet?
• Hvordan lage et bildekart lenket til annen side?

Hva er HTML -bildekart?

Bildekartet er et bilde med områder som kan klikkes. For å lage et bildekart i HTML, “”Element brukes. Dessuten en eller flere “”Tagger legges til i“ ”elementet for å spesifisere områdene.

Syntaks

Syntaksen for å spesifisere bildekart i et HTML -dokument er nevnt nedenfor:

“”Element er definert med følgende attributter:

• “src”Angir bildebanen.
• “alt”Viser en alternativ tekst når et bilde ikke kan laste.
• “usemap”Er spesifisert for å gjøre bildeområdene klikkbare. For å lage en lenke, må verdien være den samme som klassen eller IDen til "" elementet.

“”Element legges til med følgende attributter:

• “form”Angir områdestørrelsen på en HTML””Element.
• “koord”Attributt definerer koordinatene til det klikkbare området.
• “href”Attributt angir nettadressen til kilden.

Hvordan lage bildekart i HTML -dokumentet?

For å lage et bildekart i et HTML -dokument, sjekk ut de gitte instruksjonene:

• I HTML, legg til en "”Element, og tilordne en klasse”bildekart”.
• Innenfor denne diven, legg til en "”Element for å legge til et bilde tilknyttet de ovennevnte attributtene.
• Deretter legger du til en HTML “”Element og tilordne det“Klikkområde" Navn.
• Merk at “usemap”Attributt tildeles navnet”#ClickSpace”Peker på“Navn”Attributt til“ ”-merket.
• Inne i den, legg til “”Tag med de ovennevnte attributtene:

La oss gå mot CSS -delen for å justere størrelsen på bildet.

Stil “” i CSS

Bruk “.bildekart”Klasse for å få tilgang til“”Element og bruk følgende CSS -egenskaper:

.bildekart
Bredde: 700px;
Margin: Auto;

Her er beskrivelsen av de nevnte CSS -egenskapene:

• “bredde”Eiendom setter divelementets bredde.
• “margin”Eiendom legger til mer plass rundt elementet.

Stil “IMG” -element

.image-map img
Bredde: 100%;

Se, området koordinater som er spesifisert i “koord”Attributt er nå klikkbar:

I neste avsnitt lærer vi hvordan du kobler bildekartet til en annen kilde.

Hvordan lage et bildekart lenket til annen side?

Opprett en annen HTML -side med utvidelsen “.html”Ved å følge trinnene nevnt nedenfor:

• I vårt tilfelle gir vi det navnet “laptop.html”.
• Legg til et DIV -element og tilordne det en klasse “laptop-img”.
• Deretter plasserer du et bilde ved hjelp av “”Element og knytte“src”Og“bredde" attributter.
• Deretter spesifiser et avsnitt ved å bruke "

  ”Element:

En bærbar datamaskin er en bærbar datamaskin som kan flyttes og brukes i en rekke innstillinger.

I CSS, spesifiser følgende CSS -egenskaper til “laptop-img”Klasse:

.laptop-img
Bredde: 500px;
Margin: Auto;

Produksjon

Nå vil vi koble "laptop.html”Side til et bilde””Element på første side. For å gjøre det, spesifiser nettadressen til siden til “href”Attributt til“ ”elementet som vist nedenfor:

Produksjon

Vi har vellykket lært hvilke bildekart og hvordan de er knyttet til andre kilder.

Konklusjon

HTML “”Element brukes til å lage et bildekart eller et bilde med klikkbare områder. For å definere bildets klikkbare områder, ett eller flere “”Tagger legges til i“ ”elementet. Dessuten er attributtene knyttet til “” -taggen “form”,“koord”, Og“href”. Dette innlegget har illustrert hvordan du lager HTML -bildekart med et eksempel.