Dette indlæg vil lære dig:
- Hvad er HTML-billedkort?
- Hvordan opretter man billedkort i HTML-dokument?
- Hvordan opretter man et billedkort knyttet til en anden side?
Hvad er HTML-billedkort?
Billedkortet er et billede med områder, der kan klikkes på. For at lave et billedkort i HTML skal '
Syntaks
Syntaksen til at angive billedkort i et HTML-dokument er nævnt nedenfor:
< img src = 'images/img1.jpg' alt = 'bærbar' brugskort = '#clickspace' >
< kort navn = 'clickspace' >
< areal form = 'rigtigt' koordinater = '224,37,422,312' href = 'laptop.html' >
< / kort >
Det ' ' element er defineret med følgende attributter:
- “ src ” angiver billedstien.
- “ alt ” viser en alternativ tekst, når et billede ikke kan indlæses.
- “ brugskort ” er angivet for at gøre billedområderne klikbare. For at lave et link skal dets værdi være den samme som klassen eller id'et for '
Det '
- “ form ' angiver arealstørrelsen af en HTML '
' element. - “ koordinater ”-attribut definerer koordinaterne for det klikbare område.
- “ href ”-attribut angiver kildens URL.
Hvordan opretter man billedkort i HTML-dokument?
For at oprette et billedkort i et HTML-dokument, tjek de givne instruktioner:
- I HTML skal du tilføje en ' ' element, og tildel en klasse ' billedkort ”.
- Inden for denne div skal du tilføje en '
”-element for at tilføje et billede forbundet med de ovenfor diskuterede attributter.
- Tilføj derefter en HTML '
' element og tildel det ' klikrum ' navn. - Bemærk, at ' brugskort ' attribut tildeles navnet ' #clickspace ' peger på ' navn ' attribut for tagget '
- Indeni den skal du tilføje '
< div klasse = 'image-map' >” tag med de ovennævnte attributter:
< img src = 'images/img1.jpg' alt = 'bærbar' brugskort = '#clickspace' >
< kort navn = 'clickspace' >
< areal form = 'rigtigt' koordinater = '224,37,422,312' href = 'laptop.html' >
< / kort >
< / div >Lad os gå mod CSS-sektionen for at justere størrelsen på billedet.
Stil '
' i CSSBrug ' .image-map '-klassen for at få adgang til '
'-element og anvende følgende CSS-egenskaber: .image-map {
bredde : 700px;
margin: auto;
}Her er beskrivelsen af de nævnte CSS-egenskaber:
- Det ' bredde egenskaben angiver div-elementets bredde.
- Det ' margen ” ejendom tilføjer mere plads omkring elementet.
Stil 'img' Element
.image-map img {
bredde : 100 %;
}Se, områdekoordinaterne angivet i ' koordinater ”-attribut kan nu klikkes:
I det næste afsnit lærer vi, hvordan man linker billedkortet til en anden kilde.
Hvordan opretter man et billedkort knyttet til en anden side?
Opret endnu en HTML-side med udvidelsen ' .html ” ved at følge nedenstående trin:
- I vores tilfælde giver vi det navnet ' bærbar.html ”.
- Tilføj et div-element og tildel det en klasse ' bærbar-img ”.
- Placer derefter et billede ved hjælp af '
' element og tilknyt ' src ' og ' bredde ' egenskaber.
- Angiv derefter et afsnit ved hjælp af ' ' element:
< img src = '/images/laptop.jpg' bredde = '400px' >
< s >En bærbar computer er en bærbar computer, der kan flyttes og bruges i en række forskellige indstillinger.< / s >
< / div >I CSS skal du angive følgende CSS-egenskaber til ' bærbar-img ' klasse:
.laptop-img {
bredde : 500px;
margin: auto;
}Produktion
Nu vil vi linke ' laptop.html ' side til et billede '
< areal form = 'rigtigt' koordinater = '310,57,590,470' href = 'laptop.html' >” element på den første side. For at gøre det skal du angive URL'en på siden til ' href ' attribut for ' '-elementet som vist nedenfor: Produktion
Vi har med succes lært, hvad billedkort er, og hvordan de er forbundet med andre kilder.
Konklusion
HTML '
”-elementet bruges til at skabe et billedkort eller et billede med klikbare områder. For at definere billedets klikbare områder, en eller flere ' ”-tags tilføjes i “ - Inden for denne div skal du tilføje en '