Šis ieraksts jums iemācīs:
- Kas ir HTML attēlu kartes?
- Kā izveidot attēlu kartes HTML dokumentā?
- Kā izveidot attēlu karti, kas ir saistīta ar citu lapu?
Kas ir HTML attēlu kartes?
Attēlu karte ir attēls ar apgabaliem, uz kuriem var noklikšķināt. Lai izveidotu attēlu karti HTML valodā, '
Sintakse
Sintakse attēlu karšu norādīšanai HTML dokumentā ir minēta tālāk:
< img src = 'images/img1.jpg' viss = 'klēpjdators' lietošanas karti = '#clickspace' >
< karte nosaukums = 'clickspace' >
< apgabalā forma = 'taisni' koordinātas = '224,37,422,312' href = 'klēpjdators.html' >
< / karte >
' ” elements ir definēts ar šādiem atribūtiem:
- ' src ” norāda attēla ceļu.
- ' viss ” parāda alternatīvu tekstu, ja attēlu nevar ielādēt.
- ' lietošanas karti ” ir norādīts, lai attēla apgabali būtu klikšķināmi. Lai izveidotu saiti, tās vērtībai ir jābūt tādai pašai kā elementa “
'
- ' forma 'norāda HTML laukuma lielumu'
” elements. - ' koordinātas ” atribūts definē noklikšķināmā apgabala koordinātas.
- ' href ” atribūts nosaka avota URL.
Kā izveidot attēlu kartes HTML dokumentā?
Lai izveidotu attēlu karti HTML dokumentā, skatiet sniegtos norādījumus:
- HTML kodā pievienojiet “ ' elementu un piešķiriet klasi ' attēls-karte ”.
- Šajā sadaļā pievienojiet '
” elementu, lai pievienotu attēlu, kas saistīts ar iepriekš apspriestajiem atribūtiem.
- Pēc tam pievienojiet HTML '
' elementu un piešķiriet tam ' Clickspace ” nosaukums. - Ņemiet vērā, ka “ lietošanas karti ' atribūtam ir piešķirts nosaukums ' #clickspace ' norādot uz ' nosaukums '
- Tā iekšpusē pievienojiet '
< div klasē = 'attēlu karte' >” tagu ar iepriekš minētajiem atribūtiem:
< img src = 'images/img1.jpg' viss = 'klēpjdators' lietošanas karti = '#clickspace' >
< karte nosaukums = 'clickspace' >
< apgabalā forma = 'taisni' koordinātas = '224,37,422,312' href = 'klēpjdators.html' >
< / karte >
< / div >Pārejam uz CSS sadaļu, lai pielāgotu attēla izmēru.
Stils “
” CSSIzmantojiet ' .image-map ” klase, lai piekļūtu “
” elementu un lietojiet šādus CSS rekvizītus: .image-map {
platums : 700 pikseļi;
starpība: automašīna;
}Šeit ir minēto CSS rekvizītu apraksts:
- ' platums ” rekvizīts nosaka div elementa platumu.
- ' starpība ” īpašums piešķir vairāk vietas ap elementu.
Stila “img” elements
.image-map img {
platums : 100 %;
}Skatiet apgabala koordinātas, kas norādītas ' koordinātas ” tagad ir noklikšķināmi:
Nākamajā sadaļā mēs uzzināsim, kā attēlu karti saistīt ar citu avotu.
Kā izveidot attēlu karti, kas ir saistīta ar citu lapu?
Izveidojiet citu HTML lapu ar paplašinājumu ' .html ”, veicot tālāk minētās darbības:
- Mūsu gadījumā mēs tam piešķiram nosaukumu ' klēpjdators.html ”.
- Pievienojiet div elementu un piešķiriet tam klasi ' klēpjdators-attēls ”.
- Pēc tam ievietojiet attēlu, izmantojot '
' elementu un saistiet ar ' src ' un ' platums ” atribūti.
- Pēc tam norādiet rindkopu, izmantojot ' ” elements:
< img src = '/images/klēpjdators.jpg' platums = '400 pikseļi' >
< lpp >Klēpjdators ir portatīvais dators, ko var pārvietot un izmantot dažādos iestatījumos.< / lpp >
< / div >Izmantojot CSS, norādiet tālāk norādītos CSS rekvizītus. klēpjdators-attēls ” klase:
.klēpjdators-img {
platums : 500 pikseļi;
starpība: automašīna;
}Izvade
Tagad mēs saistīsim “ klēpjdators.html ' lapa uz attēlu '
< apgabalā forma = 'taisni' koordinātas = '310,57,590,470' href = 'klēpjdators.html' >” pirmās lapas elements. Lai to izdarītu, norādiet lapas URL uz ' href ” elementa “ ” atribūts, kā parādīts tālāk: Izvade
Mēs esam veiksmīgi iemācījušies, kas ir attēlu kartes un kā tās ir saistītas ar citiem avotiem.
Secinājums
HTML '
” elements tiek izmantots, lai izveidotu attēlu karti vai attēlu ar noklikšķināmiem apgabaliem. Lai definētu attēla apgabalus, uz kuriem var noklikšķināt, vienu vai vairākus “ tagi tiek pievienoti elementā “ - Šajā sadaļā pievienojiet '