Hello. Kamakailan lamang ay nagkaroon ako ng pagkakataon na makitungo sa isang partikular na tampok na html bilang isang mapa ng imahe. Sa totoo lang, hindi ako nagkaroon ng pagkakataon na gamitin ito nang madalas, at pagkatapos, kadalasan, lahat ay ginawa sa mga hugis-parihaba na zone. Ngunit hindi ito ang parehong kaso. Ang gawain ay mag-post ng mga link sa mga indibidwal na rehiyon ng larawan, na isang mapa ng bansa, at, sa kasamaang-palad, walang tanong tungkol sa anumang mga canvases o svg. Tanging html lamang hardcore! Kaya, naitakda na ang gawain, na-activate na ang Google, at maaari na tayong magsimula.
Teorya
Magsimula tayo sa teorya, saan tayo kung wala ito? Ang mapa ng larawan ay naglalaman ng dalawang tag: mapa- lalagyan ng card at lugar- zone ng pagpili. Ang mapa ay hindi limitado sa isang zone at maaaring maglaman ng walang limitasyong bilang ng mga ito. Tag lugar Bilang karagdagan sa mga karaniwang katangian, mayroon din itong sariling:- mga cord- mga coordinate ng lugar ng pagpili
- href- link kung saan ka pupunta kapag nag-click ka sa zone
- nohref- nagpapahiwatig na ang zone ay walang link
- hugis- form ng pagpili
- bilog- lugar ng pagpili sa anyo ng isang bilog
- default- pinipili ang buong lugar ng imahe
- poly- lugar ng pagpili sa anyo ng isang polygon
- tuwid- lugar ng pagpili sa anyo ng isang parihaba
- target- tinutukoy kung saan magbubukas ang link
Dahil ang aking napiling lugar ay kailangang polygonal, tinukoy namin ang halaga ng katangian ng hugis, tag ng lugar, bilang poly - polygonal na lugar. Sa mode na ito, ang mga coordinate ng punto na nauugnay sa itaas na kaliwang sulok ay ipinahiwatig, na pinaghihiwalay ng mga kuwit - x,y. Ang mga tuldok ay pinaghihiwalay din ng mga kuwit, na sa una ay nagdudulot ng kalituhan kapag nagbabasa ng naturang code.
Nagsusulat kami ng Paint
Hindi ako natuwa sa posibilidad na gamitin ang Photoshop upang mahanap ang mga coordinate ng bawat punto, manu-manong muling pagsusulat ng mga numero mula sa window ng Info, at ang mga tool na nakita ko sa Google ay napakapangit. Nagpasya kaming magsulat ng sarili naming maliit na script, na magpapahintulot sa amin na maglagay ng mga puntos sa pamamagitan lamang ng pag-click sa gustong lugar sa larawan, at ipapakita ang tapos na code.Una, ihanda natin ang layout:
Ang mga pindutan para sa pagkontrol ng pintura ay ipapasok sa #bar.
Ang nabuong html code ay ipapakita sa #info.
Body ( margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; ) img ( border: none; outline: none; display: block; -moz-user-select: none; -webkit-user -select: none; user-select: none; .canvas ( border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; ) .canvas.draw ( border-color: #3C0; ) .canvas .inner ( position: relative; ) .canvas .point ( width: 1px; height: 1px; background-color: #fff; border: 1px solid #000 ; overflow: hidden; position: absolute; ) .bar ( margin-bottom: 16px; ) .info ( background-color: #FCFCFC; border: 1px dotted #CCC; font-size: italic; : 8px; word-wrap: break-word;
Sa javascript, ang lahat ay medyo simple Sa panahon ng proseso ng pagsulat, ginamit ko ang aking sariling library ng labanan, kaya huwag mabigla sa mga hindi karaniwang pag-andar, mag-attach muna tayo ng isang mousedown na kaganapan sa #canvas, kung saan ang isang punto sa larawan ay ire-render at ang mga coordinate nito ay itatala.
Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas")), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", ("class":"point"))); +"px"; node.style.left = x-1+"px"; ;
Pagkatapos ay magsusulat kami ng isang function na bubuo ng html code ng aming mapa.
Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " "));
};
) text += "">"; nodes["info"].appendChild(_.node("span", text)); nodes["info"].appendChild(_.node("br")); ) ) nodes["impormasyon"].appendChild(_.node("span", "
I-frame natin ang lahat sa isang klase, ilang mga function ng katulong, iyon lang. Umaasa ako na ang tool na ito ay magiging kapaki-pakinabang sa isang tao.
Sa huling aralin sa video, nagsimula kaming makilala ang mga mapa ng imahe sa HTML. Tiningnan namin kung ano ang magiging hitsura nito sa huli, kahit na gumagamit ng mga script. Nag-usap kami ng kaunti tungkol sa mga coordinate. Ibig sabihin, kung paano natin sila tutukuyin. Tulad ng naaalala mo, pinili ko ang isa sa mga pamamaraan, ito ang pamamaraan gamit ang ismap attribute, dahil, sa palagay ko, ang pamamaraang ito ng pagtukoy ng mga coordinate ay ang pinakasimpleng at hindi bababa sa kumplikado, na nangangahulugang ito ang nababagay sa amin.
Bilang isang resulta, sa huling video gumawa kami ng isang link na larawan. At pagkatapos ay gumawa kami ng isang mapa ng imahe ng server mula sa imahe, na makakatulong sa amin sa pagtukoy ng mga coordinate ng mga aktibong lugar.
Ngayon ay oras na upang simulan ang aktwal na paglikha ng mapa ng imahe sa HTML. Sa video na ito ay sasakupin namin ang napakaraming impormasyon, simula sa teorya at patungo sa pagsasanay.
Magsimula tayo sa pag-aaral ng dalawa pang HTML tag, ito ang mga tag
HTML tag na mapa.
Tag
Ang tag na ito ay may kinakailangang katangian ng pangalan. Kung saan kailangan naming tukuyin ang pangalan ng aming mapa ng imahe. Bilang karagdagan, nararapat na tandaan na ang tag na ito ay hindi isang elemento ng bloke, na nangangahulugang dapat itong isulat sa loob ng isang elemento ng bloke, halimbawa isang tag ng talata o isang pangkalahatang tag ng div.
HTML tag area.
Tag ay responsable para sa pagtukoy ng mga aktibong lugar sa loob ng lalagyan
Dito gusto ko ring banggitin ang isang bagay na nakalimutan kong sabihin sa aralin sa video, na ang tag na ito ay madaling mapalitan ng isang tag para sa pagpahiwatig ng mga hyperlink sa isang HTML na dokumento. Iyon ay, ang tag . Kung natatandaan mo, ito ay nasa tag Mayroong eksaktong parehong hugis at mga katangian ng coords, na partikular na nilayon upang ipahiwatig ang base na hugis at mga coordinate nito.
Pagpapasiya ng mga coordinate ng isang parisukat, parihaba, bilog at polygon.
Gayundin sa araling video na ito ay titingnan natin nang detalyado kung paano matukoy nang tama ang mga coordinate para sa isang partikular na pigura. Gaano karaming mga coordinate ang dapat magkaroon para sa isang tiyak na figure? Ito ay dahil sa ang katunayan na ang bawat pangunahing figure ay may sariling hanay ng mga coordinate at ang pagkakasunud-sunod kung saan sila nakuha.
Una, titingnan natin nang detalyado sa teorya kung paano matukoy ang mga coordinate para sa isang parisukat, pagkatapos ay para sa isang bilog, at sa wakas para sa isang polygon.
Pagkatapos, gamit ang isang live na halimbawa, tutukuyin namin ang mga coordinate ng isang parisukat at isang parihaba. Pagkatapos ay tinutukoy namin ang mga coordinate ng bilog. At sa wakas, ipinapahiwatig namin ang mga coordinate ng tatsulok, na siya namang gumaganap ng papel ng isang polygon.
Sa pangkalahatan, ang video na ito ay magiging isang napaka-kapaki-pakinabang na gabay para sa mga interesado sa paksa ng paglikha ng mga mapa ng imahe sa HTML.
Aralin sa video: Paglikha ng isang mapa ng imahe sa HTML.
Ang direktoryo ng HTML at iba pang mga materyales ay maaari at dapat na i-download!
Sa susunod na aralin sa video, pag-aralan natin sa wakas ang paksa ng paglikha ng mga mapa ng imahe, pag-uusapan natin ang huling katangian ng tag usemap , na makakatulong sa amin na iugnay ang imahe sa mapa ng imahe. At tingnan natin ang ilang higit pang mga live na halimbawa ng mga mapa ng imahe sa iba't ibang larawan.
Sa isang html na dokumento.
Ngayon, alamin natin kung ano ang isang mapa ng imahe.
Gamit ang isang mapa ng imahe, magagawa mo ito upang kapag nag-click ka sa iba't ibang mga lugar ng parehong larawan, dadalhin ka sa iba't ibang mga pahina. Ang isang mapa ng imahe ay tinatawag ding isang mapa ng nabigasyon ng ilan.
Naiintindihan ko na mahirap itong unawain sa mga salita, kaya iminumungkahi kong tingnan ang isang halimbawa kung ano ang hitsura ng mapa ng imahe sa totoong buhay.
Bigyang-pansin lamang: ang larawan ay pareho, ngunit ang mga lugar at landas ng paglipat ay magkaiba.
Huwag matakot, ito ay hindi mahirap sa lahat. Ang pinakamahalagang bagay ay upang maunawaan ang teorya at pagsamahin ito sa pagsasanay.
Buweno, bumaba tayo sa teorya.
Ang mga mapa ng imahe (mga mapa ng nabigasyon) ay tinukoy ng tag
.
Tag - ito ay isang kahon sa loob kung saan inilalagay ang mga tag
.
Tag ay nilayon upang tukuyin ang isang geometric na rehiyon na may reference na nakalakip sa bawat rehiyon.
Mga katangian ng lugar
1. katangian ng hugis
hugis – tumutukoy sa hugis ng lugar ( parihaba, bilog, polygon).
Parihaba - "rect". Halimbawa: hugis=" tama";
bilog - "bilog". Halimbawa: hugis=" bilog";
polygon - "poly". Halimbawa: hugis=" poly"
2. katangian ng coordinate
Ang mga coords ay ang pagkakaayos ng isang geometric na hugis.
Tingnan natin ang isang halimbawa gamit ang geometric na hugis ng isang parihaba.
Alam mo na kung kailangan mo ng isang parihaba na hugis, kailangan mong itakda ang halaga sa katangian ng hugis « tuwid ».
Ang reference point ay nagsisimula sa itaas na kaliwang sulok ng larawan, ang mga coordinate nito ay (0;0)
Nangangahulugan ito na kailangan mong tukuyin ang mga coordinate ng lugar ng trabaho ng rektanggulo, kaliwa sa itaas at kanang ibabang sulok.
Para sa halimbawang may rectangle No. 1, kunin ang mga sumusunod na coordinate:
x1=25, y1=36, x2=114, y2=98
Ito ang magiging hitsura ng code:
So far so good. Ngunit ngayon kailangan nating iugnay ang larawan sa mapa.
Upang gawin ito, bumuo ng anumang pangalan para sa mapa, halimbawa, "karta1" at isulat ito sa tag
Ngayon ikonekta natin ang card sa larawan. Upang gawin ito, ginagamit namin ang katangian ng usemap.
Halimbawa ng pagsulat:
usemap=" #map_name"
Sa aming kaso, magiging ganito:
Ngayon, pagsamahin natin ang lahat at isulat ang mga coordinate para sa isa pang parihaba No. 2 na may parehong data (x1=153, y1=11, x2=219, y2=127).
Ngayon tingnan ang resulta. Mag-click sa rectangle #1 at sa rectangle #2
Una kailangan mong tukuyin ang uri ng lugar. Upang gawin ito, itakda ang halaga na "bilog" sa katangian ng hugis.
Ngayon ay lumipat tayo sa mga coordinate.
Upang lumikha ng mga coordinate para sa isang pabilog na lugar, kailangan mong magpasok ng data sa gitna (xy) at tukuyin ang haba ng radius (R).
Ang pagkakasunud-sunod ng pagtatala ng mga coordinate para sa katangian ng coords ay ang mga sumusunod:
Para sa bilog No. 1, kunin ang mga sumusunod na coordinate:
x=46, y=48; at ang haba ng radius ay R=35
Ngayon pagsama-samahin natin ang lahat at isulat ang mga coordinate para sa bilog No. 2 na may sumusunod na data x=158, y=75, R=53.
Ngayon tingnan ang resulta. Mag-click sa bilog #1 at bilog #2:
Ang polygonal area ay ang pinaka kumplikadong lugar sa navigation map.
Una kailangan mong tukuyin ang uri ng lugar. Upang gawin ito, itakda ang halaga na "poly" sa katangian ng hugis
Ngayon ay lumipat tayo sa mga coordinate.
Ang pagkakasunud-sunod ng pagtatala ng mga coordinate para sa katangian ng coords ay ang mga sumusunod:
Paliwanag:
x1 ,y1 -
mga coordinate ng unang sulok;
x2 ,y2 -
mga coordinate ng pangalawang sulok;
xN,yN -
huling mga coordinate ng sulok
Iyon ay, para sa polygon No. 2 ganito ang hitsura:
Ngayon bigyan natin ng pangalan ang mapa at i-link ang mapa sa larawan:
Ngayon, pagsama-samahin natin ang lahat at isulat ang mga coordinate para sa hexagon No. 1 na may sumusunod na data: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4= 96, x5= 54, y5=96, x6=16, y6=58.
Ngayon tingnan ang resulta. Mag-click sa polygon #1 at sa polygon #2:
Posibilidad ng kumbinasyon
May mga kaso kung kailan kailangan mong gumamit ng iba't ibang mga lugar sa parehong oras sa isang larawan, halimbawa, isang bilog at isang parihaba:
Pagdaragdag gamit ang TITLE
Para sa bawat lugar, maaari kang magdagdag ng mga tooltip gamit ang katangian ng pamagat.
Ngayon tingnan ang resulta. I-hover ang iyong mouse sa bilog at pagkatapos ay sa parihaba:
yun lang. Nalaman namin ang mapa ng imahe sa HTML (navigation map).
Mga HTML tagKahulugan at Aplikasyon
Tag
Suporta sa browser
| Tag | Opera | IExplorer | gilid |
|||
|---|---|---|---|---|---|---|
| Oo | Oo | Oo | Oo | Oo | Oo |
Mga Katangian
Mga katangian ng tag ipinapahiwatig namin ang parehong mga coordinate ng lugar (attribute ng coords) at ang uri ng hugis na kailangan namin (attribute ng hugis):
Halimbawa ng paggamit
Tingnan natin ang isang halimbawa kung saan kapag nag-click ka sa isang partikular na hugis sa isang larawan, pupunta ka sa iba't ibang mga web page na naglalarawan sa mga hugis na ito (mga link sa Wikipedia):
Pumili ng figure:
At sa gayon, kung ano ang ginawa namin sa halimbawang ito:
- Nag-post ng larawan (tag
), na gagamitin natin sa paglaon kapag lumilikha ng isang mapa ng imahe. Sa katangian ng usemap, dapat mong tukuyin ang pangalan ng imahe ng mapa na gagamitin namin sa elemento
- Ilagay ang larawan ng mapa (tag
- Maglagay ng apat na tag , na tumutukoy sa mga interactive na lugar sa larawan ng mapa:
- Una tanong namin hugis-parihaba na lugar(hugis na katangian na may halagang "rect"), ito ay tumutugma sa aming una larawan ( unang dalawa ang mga halaga ay tumutugma sa kaliwang sulok sa itaas, ang mga sumusunod dalawa ang mga halaga ay tumutukoy sa itaas at ibabang kanang sulok).
- Pangalawa ipahiwatig bilog na lugar(hugis na katangian na may halagang "bilog"), ito ay tumutugma sa aming pangalawa larawan ( una tumutugma ang halaga sa mga coordinate ng axis x, at ang pangalawa sa kahabaan ng axis y, tinutukoy ng pangatlo radius).
- Tungkol sa pangatlo At ikaapat na pigura, pagkatapos ay pinagsama-sama ang mga ito ayon sa prinsipyo polygonal na lugar(hugis na katangian na may halagang "poly"). Tinutukoy mo ang kinakailangang bilang ng mga puntos sa imahe, kalkulahin ang mga coordinate ng mga puntong ito (graphical editor) at ipahiwatig ang mga ito sa isang pagkakasunud-sunod na maaaring ikonekta ng browser ang mga ito sa isang linya. Paggamit ng isang tatsulok bilang isang halimbawa (ikatlong larawan): una punto (coordinate x At y vertex), pangalawa punto (coordinate x At y ibabang kaliwang sulok) at pangatlo punto (coordinate x At y kanang sulok sa ibaba).
Iginuhit ko ang iyong pansin sa katotohanan na kung ang tag
