Consells per crear un mapa d'imatges amb Dreamweaver

Els avantatges i inconvenients d'utilitzar mapes d'imatges

Hi va haver un punt en la història del disseny web on molts llocs utilitzaven una característica coneguda com "mapes d'imatges". Aquesta és una llista de coordenades adjuntes a una imatge específica d'una pàgina. Aquestes coordenades creen àrees d'hipervincles en aquesta imatge, essencial afegint "punts calents" a un gràfic, cadascun dels quals es pot codificar per enllaçar a diferents llocs. Això és molt diferent del simple fet d'afegir una etiqueta d'enllaç a una imatge, el que farà que tot el gràfic es converteixi en un gran enllaç cap a una única destinació.

Exemples: imagineu tenir un fitxer gràfic amb una imatge dels Estats Units. Si voleu que cada estat sigui "clicable" per tal que vagin a pàgines sobre aquest estat específic, podeu fer-ho amb un mapa d'imatge. De la mateixa manera, si teniu una imatge d'una banda de música, podeu utilitzar un mapa d'imatge per fer clic a cada pàgina individual en una pàgina posterior sobre el membre de la banda.

Els mapes d'imatges són útils? Certament eren, però han caigut a favor en la web d'avui. Això és, almenys en part, perquè els mapes d'imatges requereixen coordenades específiques per treballar. Els llocs web avui es construeixen per respondre i escalar les imatges segons la mida d'una pantalla o dispositiu. Això significa que les coordenades preestablertes, que és com funcionen els mapes d'imatges, disminueixen quan un lloc escala i les imatges canvien de mida. Per aquest motiu, els mapes d'imatges poques vegades s'utilitzen en els llocs de producció d'avui, però encara tenen avantatges per a demostracions o instàncies en què estan forçant la mida d'una pàgina.

Voleu saber com crear un mapa d'imatges, específicament com fer-ho amb Dreamweaver? . El procés no és especialment difícil, però tampoc és fàcil, així que hauríeu de tenir alguna experiència abans de començar.

Començant

Comencem. El primer pas que heu de fer és afegir una imatge a la vostra pàgina web. A continuació, feu clic a la imatge per ressaltar-la. A partir d'aquí, heu d'anar al menú de propietats (i feu clic a una de les tres eines de dibuix de la zona de connexió: rectangle, cercle o polígon. No us oblideu d'indicar la vostra imatge, que podeu fer a la barra de propietats. És el que vulguis. Utilitzeu el "mapa" com a exemple.

Ara, dibuixa la forma que desitgi a la teva imatge utilitzant una d'aquestes eines. Si necessiteu taques rectangulars, utilitzeu el rectangle. És igual per al cercle. Si voleu formes de zones més complexes, utilitzeu el polígon. Això és el que probablement usaria en l'exemple del mapa dels EUA, ja que el polígon us permetria deixar anar punts i crear formes molt complexes i irregulars a la imatge.

A la finestra de propietats del punt d'accés, introduïu o aneu a la pàgina a la que hotspot ha d'enllaçar. Això és el que crea aquesta àrea vinculable. Continueu afegint punts d'interès fins que s'hagi completat el vostre mapa i s'han afegit tots els enllaços que voleu afegir.

Una vegada que hagueu acabat, torneu a veure el vostre mapa d'imatge en un navegador per assegurar-vos que funcioni correctament. Feu clic a cada enllaç per assegurar-vos que vagi al recurs o a la pàgina web adequats.

Desavantatges dels mapes d'imatges

Una vegada més, tingueu en compte que els mapes d'imatges tenen diversos inconvenients, fins i tot fora de l'esmentada manca de suport amb llocs web responsables. Firs, es poden obrir petits detalls en un mapa d'imatge. Per exemple, els mapes d'imatges geogràfiques poden ajudar a determinar quin continent pertany a un usuari, però aquests mapes poden no ser prou detallats per identificar el país d'origen de l'usuari. Això significa que un mapa d'imatge pot ajudar a determinar si un usuari és d'Àsia, però no de Cambodja, en particular.

Els mapes d'imatges també es poden carregar lentament. No s'han d'utilitzar diverses vegades en un lloc web perquè ocupen massa espai per utilitzar-se a cada pàgina d'un lloc web. Hi ha massa mapes d'imatges en una única pàgina que generarien un coll d'ampolla greu i un impacte massiu en el rendiment del lloc .

Finalment, és possible que els mapes d'imatges no siguin fàcils d'accedir als usuaris amb problemes visuals. Si heu utilitzat mapes d'imatges, també heu de crear un altre sistema de navegació per a aquests usuaris com a alternativa.

Linia inferior

Utilitzo mapes d'imatges de tant en tant quan intenteu fer una demo ràpida d'un disseny i com funciona. Per exemple, potser estic simulant un disseny per a una aplicació per a mòbils i vull utilitzar mapes d'imatges per crear punts d'interès per simular la interactivitat de l'aplicació. Això és molt més senzill de fer que codificar l'aplicació o, fins i tot, crear pàgines web fictícies amb estàndards actuals amb HTML i CSS. En aquest exemple concret, i perquè sé quin dispositiu demo el disseny i pot escalar el codi a aquest dispositiu, funciona un mapa d'imatge, però posar-los en un lloc de producció o aplicació és molt complicat i probablement s'hauria d'evitar en l'actualitat. llocs web.

Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/09/17.