Què cal saber
• Utilitzeu una imatge de mida normal que el navegador no redimensionarà. També necessitareu un editor d'imatges i un editor HTML o de text.
• En inserir la imatge, afegiu un atribut addicional per identificar les coordenades del mapa.
• Per exemple:
Aquest article explica com crear mapes d'imatge utilitzant etiquetes HTML en lloc d'un editor de mapes d'imatge. La majoria dels editors d'imatges us mostraran les coordenades del ratolí quan apunteu a la imatge, que són totes les dades que necessiteu per començar amb els mapes d'imatge.
Creació d'un mapa d'imatge
Per crear un mapa d'imatge, primer seleccioneu una imatge que servirà de base per al mapa. La imatge ha de ser de "mida normal", és a dir, no hauríeu d'utilitzar una imatge tan gran que el navegador l'ampliï.
Quan inseriu la imatge, afegireu un atribut addicional que identifica les coordenades del mapa:
Quan creeu un mapa d'imatge, esteu creant una àrea on es pot fer clic a la imatge, de manera que les coordenades del mapa s'han d'alinear amb l'alçada i l'amplada de la imatge que heu seleccionat. Els mapes admeten tres tipus diferents de formes:
- rect: un rectangle o una figura de quatre cares
- polígon: un polígon o figura de diverses cares
- cercle-un cercle
Per crear les àrees, heu d'aïllar les coordenades específiques que voleu cartografiar. Un mapa pot consistir en una o més àrees definides a la imatge que, quan es fa clic, obren un hiperenllaç nou.
Per a un rectangle, mapes només les cantonades superior esquerra i inferior dreta. Totes les coordenades es mostren com a x, y (per sobre, amunt). Per tant, per a la cantonada superior esquerra 0, 0 i la cantonada inferior dreta 10, 15, escriviu 0, 0, 10, 15. A continuació, l'inclou al mapa:
Per a un polígon, mapes cada coordenada x, y per separat. El navegador web connecta automàticament l'últim conjunt de coordenades amb el primer; qualsevol cosa dins d'aquestes coordenades forma part del mapa.
Les formes de cercle només requereixen dues coordenades, com el rectangle, però per a la segona coordenada, especifiqueu el radi o la distància des del centre del cercle. Per tant, per a un cercle amb el centre a 122, 122 i un radi de 5, escriuria 122, 122, 5:
Totes les àrees i les formes es poden incloure a la mateixa etiqueta de mapa:
Consideracions
Els mapes d'imatge eren molt més habituals a l'era de la Web 1.0 dels anys noranta fins a principis dels anys 2000; els mapes d'imatge sovint formaven la base de la navegació d'un lloc web. Un dissenyador crearia algun tipus d'imatge per indicar els elements del menú i després establiria un mapa.
Els enfocaments moderns fomenten el disseny responsiu i utilitzen fulls d'estil en cascada per controlar la col·locació d'imatges i hiperenllaços a una pàgina.
Tot i que l'etiqueta de mapa encara és compatible amb l'estàndard HTML, l'ús de dispositius mòbils amb factors de forma reduïts pot provocar problemes de rendiment inesperats amb els mapes d'imatge. A més, els problemes d'amplada de banda o les imatges trencades discuteixen el valor d'un mapa d'imatge.
Per tant, no dubteu a seguir utilitzant aquesta tecnologia estable i ben entesa, sabent que hi ha alternatives més eficients actualment de moda entre els dissenyadors web.
