Dette innlegget vil lære deg:
- Hva er HTML-bildekart?
- Hvordan lage bildekart i HTML-dokument?
- Hvordan lage et bildekart koblet til en annen side?
Hva er HTML-bildekart?
Bildekartet er et bilde med områder som kan klikkes. For å lage et bildekart i HTML, '
Syntaks
Syntaksen for å spesifisere bildekart i et HTML-dokument er nevnt nedenfor:
< img src = 'images/img1.jpg' alt = 'laptop' brukskart = '#clickspace' >
< kart Navn = 'clickspace' >
< område form = 'riktig' koordinater = '224,37,422,312' href = 'laptop.html' >
< / kart >
« element er definert med følgende attributter:
- ' src ” spesifiserer bildebanen.
- ' alt ” viser en alternativ tekst når et bilde ikke kan lastes.
- ' brukskart ” er spesifisert for å gjøre bildeområdene klikkbare. For å lage en kobling, må verdien være den samme som klassen eller ID-en til «
«
- ' form ' spesifiserer områdestørrelsen til en HTML '
' element. - ' koordinater ”-attributt definerer koordinatene til det klikkbare området.
- ' href ”-attributt angir URL-en til kilden.
Hvordan lage bildekart i HTML-dokument?
For å lage et bildekart i et HTML-dokument, sjekk ut de gitte instruksjonene:
- I HTML legger du til en ' ' element, og tilordne en klasse ' bilde-kart '.
- Innenfor denne div, legg til en '
”-element for å legge til et bilde assosiert med de ovenfor diskuterte attributtene.
- Deretter legger du til en HTML '
'-elementet og tilordne det ' klikkrom ' Navn. - Merk at ' brukskart ' attributt er tildelt navnet ' #clickspace ' peker på ' Navn '-attributtet til '
- Inni den legger du til '
< div klasse = 'bildekart' >'-taggen med de ovennevnte attributtene:
< img src = 'images/img1.jpg' alt = 'laptop' brukskart = '#clickspace' >
< kart Navn = 'clickspace' >
< område form = 'riktig' koordinater = '224,37,422,312' href = 'laptop.html' >
< / kart >
< / div >La oss gå mot CSS-delen for å justere størrelsen på bildet.
Stil «
» i CSSBruk ' .image-map '-klassen for å få tilgang til '
'-elementet og bruk følgende CSS-egenskaper: .image-map {
bredde : 700px;
margin: bil;
}Her er beskrivelsen av de nevnte CSS-egenskapene:
- « bredde '-egenskapen setter div-elementets bredde.
- « margin ” egenskapen gir mer plass rundt elementet.
Stil 'img' Element
.image-map img {
bredde : 100 %;
}Se, områdekoordinatene spesifisert i ' koordinater '-attributtet er nå klikkbare:
I neste avsnitt lærer vi hvordan du kobler bildekartet til en annen kilde.
Hvordan lage et bildekart koblet til en annen side?
Opprett en annen HTML-side med utvidelsen ' .html ved å følge trinnene nevnt nedenfor:
- I vårt tilfelle gir vi den navnet ' laptop.html '.
- Legg til et div-element og tilordne det en klasse ' laptop-img '.
- Plasser deretter et bilde ved å bruke '
'-elementet og tilknytt ' src ' og ' bredde ' attributter.
- Deretter spesifiser et avsnitt ved å bruke ' ' element:
< img src = '/images/laptop.jpg' bredde = '400px' >
< s >En bærbar datamaskin er en bærbar datamaskin som kan flyttes og brukes i en rekke innstillinger.< / s >
< / div >I CSS, spesifiser følgende CSS-egenskaper til ' laptop-img ' klasse:
.laptop-img {
bredde : 500px;
margin: bil;
}Produksjon
Nå vil vi koble ' laptop.html ' side til et bilde '
< område form = 'riktig' koordinater = '310,57,590,470' href = 'laptop.html' >”-elementet på den første siden. For å gjøre det, spesifiser URL-en til siden til ' href '-attributt for ' '-elementet som vist nedenfor: Produksjon
Vi har med hell lært hva bildekart er og hvordan de er knyttet til andre kilder.
Konklusjon
HTML-en '
”-elementet 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 ', ' koordinater ', og ' href '. Dette innlegget har illustrert hvordan du lager HTML-bildekart med et eksempel. - Innenfor denne div, legg til en '