Kā veidot attēlu kartes HTML5

Autors Eds Tituls, Kriss Miniks

Tīmekļa lapās navigācijai bieži tiek izmantoti attēli. Tās ir glītākas nekā vienkārša teksta saites, un vienā lapā varat pievienot gan formu, gan funkciju savā lapā. Kad izmantojat elementu ar enkura elementu, lai izveidotu saistošo attēlu, šim attēlam varat pievienot tikai vienu saiti. Lai izveidotu lielāku attēlu, kas savieno saites ar dažādiem lapas reģioniem, jums ir nepieciešams attēls attēlu karte.



Lai izveidotu attēlu karti, jums ir nepieciešamas divas lietas:



Elementi un atribūti

Izmantojiet elementu, lai pievienotu kartes attēlu savai lapai tāpat kā jebkuru citu attēlu. Turklāt iekļaujietlietotnes karteatribūtu, lai pārlūkprogramma uzzinātu, ka attēla kartes informācijai jāiet kopā ar šo attēlu. Vērtībalietotnes karteatribūts ir jūsu kartes nosaukums.

Attēlu kartes definēšanai izmantojat divus elementus un atribūtu kolekciju:



  • kartetur kartes informāciju. Thekarteelements izmantonosaukumsatribūts kartes identificēšanai. Vērtībanosaukumsir jāatbilstlietotnes karteiekš elements, kas iet kopā ar karti.

  • apgabalāsaista noteiktas kartes daļas ar vietrāžiem URL. Theapgabalāelements nosaka šos atribūtus, lai noteiktu katras kartes sadaļas specifiku:

    • forma: Norāda reģiona formu (klikšķināms karstais punkts, kas padara attēlu karti darbīgu). Jūs varat izvēlētiestaisni(taisnstūris),aplis, unpoli(trīsstūris vai daudzstūris).

    • koordi: Nosaka reģiona koordinātas.

      Taisnstūra koordinātes ietver kreiso, labo, augšējo un apakšējo punktu.

      Apļa koordinātās ietilpst apļa centra x un y koordinātas, kā arī apļa rādiuss.

      Convenia injekcija kaķiem

      Daudzstūra koordinātas ir x un y koordinātu kolekcija katram virsotnei daudzstūrī.

      Lai noteiktu attēlu koordinātas, varat izmantot attēlu kartes redaktoru, piemēram, Mapedit vai grafikas redaktoru, piemēram, PaintShop Photo Pro . Mapedit arī reģistrē šīs koordinātas jums.

    • href: Norāda vietrādi URL, uz kuru saista reģions (var būt absolūts vai relatīvs).

    • viss: Nodrošina attēla reģionam alternatīvu tekstu.

Atzīmes

Tālāk ir definēta trīs reģionu karte ar nosaukumuNavMapsaistīts ar nosaukto grafikas failuimg / web-design-development / 59 / how-build-image-maps-html5.gif:

  

Attēlā parādīts, kā pārlūkprogramma parāda šo marķējumu.

Kad pele atrodas kartē virs reģiona, kursors pārvēršas par rādītājroku (tāpat kā tas mainās pār jebkuru citu hipersaiti). Tāpēc izmantojiet virsraksta teksta priekšrocības, lai iekļautu noderīgu informāciju par saiti un padarītu karti pieejamāku vājredzīgajiem.

image0.jpg

Attēlu karšu kopīga izmantošana ir vietu (štatu, valstu un citu) karšu pārveidošana par sasaistāmām kartēm. Šeit ir daži tiešsaistes resursi, kurus varat izmantot:

Attēlu karšu izveidošana ar rokām var būt sarežģīta. Izmantojiet attēlu redaktoru, lai identificētu katru punktu jūsu kartē un pēc tam izveidojiet tam atbilstošu marķējumu. Lielākā daļa HTML rīku ietver utilītas, kas palīdz veidot attēlu kartes. Ja izmantojat šāda rīka priekšrocības, varat ātri un ar dažām kļūdām izveidot attēlu kartes.

Esiet piesardzīgs, lietojot attēlu kartes. Ja veidojat vizuālo palīglīdzekli (piemēram, karti, kurā ir norādītas saites uz dažādām valstīm, piemēram), attēla kartes izmantošana ir pilnīgi jēga. No otras puses, galvenajai navigācijai nekad nevajadzētu izmantot grafiku ar attēlu kartēm. (Nu, jūs varētu, bet rezultāti jums nepatiktu!)

Vienmēr galvenajā vietnes navigācijā izmantojiet HTML un CSS vai, ja jāizmanto grafiskā attēlu karte, kopā ar šo karti iekļaujiet arī tekstu balstītu alternatīvu, lai vietnes redzes invalīdi varētu pārvietoties arī, izmantojot alternatīvās vadīklas.

Parasti navigācijai vislabāk ir izmantot tekstu pogu etiķetēm un ļaut CSS apstrādāt darbu, kas saistīts ar pogu izskatu.