Ang post na ito ay magtuturo sa iyo:
- Ano ang HTML Image Maps?
- Paano Gumawa ng Mga Mapa ng Larawan sa Dokumentong HTML?
- Paano Gumawa ng Mapa ng Imahe na Naka-link sa Ibang Pahina?
Ano ang HTML Image Maps?
Ang mapa ng imahe ay isang larawan na may mga lugar na maaaring i-click. Upang gumawa ng mapa ng imahe sa HTML, ang '
Syntax
Ang syntax upang tukuyin ang mga mapa ng imahe sa isang HTML na dokumento ay binanggit sa ibaba:
< img src = 'images/img1.jpg' lahat = 'laptop' usemap = '#clickspace' >
< mapa pangalan = 'clickspace' >
< lugar Hugis = 'tama' mga coordinate = '224,37,422,312' href = 'laptop.html' >
< / mapa >
Ang ' ” ang elemento ay tinukoy na may mga sumusunod na katangian:
- “ src ” ay tumutukoy sa landas ng imahe.
- “ lahat ” ay nagpapakita ng kahaliling text kapag hindi mai-load ang isang larawan.
- “ usemap ” ay tinukoy upang gawing naki-click ang mga lugar ng larawan. Upang makagawa ng isang link, ang halaga nito ay dapat na kapareho ng klase o id ng elementong “
Ang '
- “ Hugis Tinutukoy ng ” ang laki ng lugar ng isang HTML “
' elemento. - “ mga coordinate Tinutukoy ng katangian ng ” ang mga coordinate ng naki-click na lugar.
- “ href Itinakda ng katangian ng ” ang URL ng pinagmulan.
Paano Gumawa ng Mga Mapa ng Larawan sa Dokumentong HTML?
Upang lumikha ng isang mapa ng imahe sa isang HTML na dokumento, tingnan ang ibinigay na mga tagubilin:
- Sa HTML, magdagdag ng “ 'elemento, at magtalaga ng isang klase' imahe-mapa ”.
- Sa loob ng div na ito, magdagdag ng '
” elemento upang magdagdag ng larawang nauugnay sa mga katangiang tinalakay sa itaas.
- Pagkatapos, magdagdag ng HTML '
” elemento at italaga dito ang “ clickspace ” pangalan. - Tandaan na ang ' usemap Ang 'attribute ay itinalaga ang pangalan' #clickspace 'nakaturo sa' pangalan ” attribute ng tag na “
- Sa loob nito, idagdag ang '
< div klase = 'mapa ng imahe' >” tag na may mga nabanggit na katangian:
< img src = 'images/img1.jpg' lahat = 'laptop' usemap = '#clickspace' >
< mapa pangalan = 'clickspace' >
< lugar Hugis = 'tama' mga coordinate = '224,37,422,312' href = 'laptop.html' >
< / mapa >
< / div >Lumipat tayo sa seksyon ng CSS upang ayusin ang laki ng larawan.
Istilo “
” sa CSSGamitin ang ' .image-map 'klase para ma-access ang '
” elemento at ilapat ang mga sumusunod na katangian ng CSS: .image-map {
lapad : 700px;
margin: kotse;
}Narito ang paglalarawan ng nabanggit na mga katangian ng CSS:
- Ang ' lapad Ang ” property ay nagtatakda ng lapad ng div element.
- Ang ' margin ” ang property ay nagdaragdag ng mas maraming espasyo sa paligid ng elemento.
Istilo ng 'img' Element
.image-map img {
lapad : 100 %;
}Tingnan, ang mga coordinate ng lugar na tinukoy sa ' mga coordinate ” attribute ay naki-click na ngayon:
Sa susunod na seksyon, matututunan natin kung paano i-link ang mapa ng imahe sa isa pang pinagmulan.
Paano Gumawa ng Mapa ng Imahe na Naka-link sa Ibang Pahina?
Gumawa ng isa pang HTML page na may extension na “ .html ” sa pamamagitan ng pagsunod sa mga hakbang na binanggit sa ibaba:
- Sa aming kaso, binibigyan namin ito ng pangalan na ' laptop.html ”.
- Magdagdag ng isang elemento ng div at italaga ito ng isang klase ' laptop-img ”.
- Pagkatapos, maglagay ng larawan gamit ang “
'elemento at iugnay ang' src 'at' lapad ” mga katangian.
- Susunod, tukuyin ang isang talata gamit ang ' ' elemento:
< img src = '/images/laptop.jpg' lapad = '400px' >
< p >Ang laptop ay isang portable na computer na maaaring ilipat at gamitin sa iba't ibang setting.< / p >
< / div >Sa CSS, tukuyin ang mga sumusunod na katangian ng CSS sa “ laptop-img 'klase:
.laptop-img {
lapad : 500px;
margin: kotse;
}Output
Ngayon, iuugnay natin ang ' laptop.html 'pahina sa isang larawan'
< lugar Hugis = 'tama' mga coordinate = '310,57,590,470' href = 'laptop.html' >” elemento ng unang pahina. Upang gawin ito, tukuyin ang URL ng pahina sa ' href ” attribute ng “ ” na elemento tulad ng ipinapakita sa ibaba: Output
Matagumpay naming natutunan kung ano ang mga mapa ng imahe at kung paano naka-link ang mga ito sa iba pang mga mapagkukunan.
Konklusyon
Ang HTML '
'Ang elemento ay ginagamit upang lumikha ng isang mapa ng imahe o isang imahe na may mga naki-click na lugar. Upang tukuyin ang mga naki-click na lugar ng larawan, isa o higit pang ' Ang mga tag ay idinaragdag sa loob ng elementong ' - Sa loob ng div na ito, magdagdag ng '