HTML -beeldkaarte
Met HTML-beeldkaarte kan jy klikbare areas op 'n prent skep.
Beeldkaarte
Die HTML <map>-merker definieer 'n beeldkaart. 'n Beeldkaart is 'n prent met klikbare areas. Die areas word gedefinieer met een of meer <area>etikette.
Probeer om op die rekenaar, foon of die koppie koffie in die prent hieronder te klik:
Voorbeeld
Hier is die HTML-bronkode vir die prentkaart hierbo:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
Hoe werk dit?
Die idee agter 'n prentkaart is dat jy verskillende aksies moet kan uitvoer, afhangend van waar in die prent jy klik.
Om 'n prentkaart te skep, benodig jy 'n prent en 'n HTML-kode wat die klikbare areas beskryf.
Die beeld
Die prent word ingevoeg met behulp van die <img>merker. Die enigste verskil van ander beelde is dat jy 'n usemapkenmerk moet byvoeg:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Die usemapwaarde begin met 'n hash-tag
#gevolg deur die naam van die beeldkaart, en word gebruik om 'n verhouding tussen die beeld en die beeldkaart te skep.
Wenk: Jy kan enige prent as 'n prentkaart gebruik!
Skep beeldkaart
Voeg dan 'n <map>element by.
Die <map>element word gebruik om 'n beeldkaart te skep, en word aan die beeld gekoppel deur die vereiste name
kenmerk te gebruik:
<map name="workmap">
Die namekenmerk moet dieselfde waarde as die
<img>kenmerk usemaphê.
Die Gebiede
Voeg dan die klikbare areas by.
'n Klikbare area word gedefinieer deur 'n <area>element te gebruik.
Vorm
Jy moet die vorm van die klikbare area definieer, en jy kan een van hierdie waardes kies:
rect- definieer 'n reghoekige gebiedcircle- definieer 'n sirkelvormige gebiedpoly- definieer 'n veelhoekige gebieddefault- definieer die hele streek
Jy moet ook 'n paar koördinate definieer om die klikbare area op die prent te kan plaas.
Shape="rect"
Die koördinate vir shape="rect"kom in pare, een vir die x-as en een vir die y-as.
Dus, die koördinate 34,44is 34 pixels vanaf die linkerkantlyn en 44 pixels van bo af geleë:
Die koördinate 270,350is 270 pixels vanaf die linkerkantlyn en 350 pixels van bo af geleë:
Nou het ons genoeg data om 'n klikbare reghoekige area te skep:
Voorbeeld
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Dit is die area wat klikbaar word en sal die gebruiker na die bladsy "computer.htm" stuur:
Vorm="sirkel"
Om 'n sirkel area by te voeg, vind eers die koördinate van die middel van die sirkel:
337,300
Spesifiseer dan die radius van die sirkel:
44pixels
Nou het jy genoeg data om 'n klikbare sirkelvormige area te skep:
Voorbeeld
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Dit is die area wat klikbaar word en sal die gebruiker na die bladsy "coffee.htm" stuur:
Shape="poly"
Die shape="poly"bevat verskeie koördinaatpunte, wat 'n vorm skep wat met reguit lyne ('n veelhoek) gevorm word.
Dit kan gebruik word om enige vorm te skep.
Soos miskien 'n croissant-vorm!
Hoe kan ons die croissant in die prent hieronder 'n klikbare skakel maak?
Ons moet die x- en y-koördinate vir al die rande van die croissant vind:
Die koördinate kom in pare, een vir die x-as en een vir die y-as:
Voorbeeld
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Dit is die area wat klikbaar word en sal die gebruiker na die bladsy "croissant.htm" stuur:
Beeldkaart en JavaScript
'n Klikbare area kan ook 'n JavaScript-funksie aktiveer.
Voeg 'n clickgebeurtenis by die <area>element om 'n JavaScript-funksie uit te voer:
Voorbeeld
Hier gebruik ons die onclick-kenmerk om 'n JavaScript-funksie uit te voer wanneer die area geklik word:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Hoofstuk Opsomming
- Gebruik die HTML
<map>-element om 'n beeldkaart te definieer - Gebruik die HTML
<area>-element om die klikbare areas in die beeldkaart te definieer - Gebruik die HTML -
usemapkenmerk van die<img>element om na 'n prentkaart te wys
HTML-beeldetikette
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .