Como construír imaxes con mapas sen un editor de mapas de imaxes

by Jennifer Kyrnin

Os mapas de imaxes son só etiquetas HTML simples

Os mapas de imaxes son unha forma interesante e interesante de animar o seu sitio web: con eles, pode subir imaxes e facer que algunhas das mesmas fosen clicadas noutros recursos en liña. Se estás en apuros e non queres descargar un editor de mapas de imaxes, crear un mapa usando etiquetas HTML é sinxelo.

Necesitarás unha imaxe, un editor de imaxes e algún tipo de editor ou editor de texto en HTML . A maioría dos editores de imaxes mostraranse as coordenadas do rato cando apunta a imaxe. Este dato de coordenadas é todo o que necesitas para comezar cos mapas de imaxes.

Creando un mapa de imaxes

Para crear un mapa de imaxe, primeiro seleccione unha imaxe que servirá de base ao mapa. A imaxe debe ser "tamaño normal", isto é, non debes usar unha imaxe tan grande que o navegador escalará.

Cando insira a imaxe, engadirá un atributo extra que identifique as coordenadas do mapa:

Cando se crea un mapa de imaxe, está creando unha área que se pode facer clic na imaxe, de xeito que as coordenadas do mapa deben axustarse coa altura e ancho da imaxe que seleccionou. Os mapas admiten tres tipos diferentes de formas:

recto: un rectángulo ou figura de catro lados
poly-a polígono ou figura polifacética
círculo: un círculo

Para crear as áreas, ten que illar as coordenadas específicas que pretende mapear. Un mapa pode consistir nunha ou máis áreas definidas na imaxe que, ao facer clic, abra unha nova hiperligazón.

Para un rectángulo , mapache só cos cantos superior dereito e esquerdo. Todas as coordenadas están listadas como x, y (over, up). Entón, para a esquina superior esquerda 0,0 e na esquina inferior dereita 10,15 escreberías 0,0,10,15 . A continuación, inclúeo no mapa:

Para un polígono , mapeas cada coordenada x, y por separado. O navegador web conecta automáticamente o último conxunto de coordenadas co primeiro; Calquera cousa dentro destas coordenadas é parte do mapa.

As formas do círculo só requiren dúas coordenadas, como o rectángulo, pero para a segunda coordenada, especifica o radio ou a distancia do centro do círculo. Entón, para un círculo co centro en 122.122 e un radio de 5 escreberías 122.152,5:

Todas as áreas e formas poden incluírse na mesma etiqueta de mapa:

<área shape =" circense "coords =" 122,122,5 "href =" catbert.htm "alt =" Catbert ">

Consideracións

Os mapas de imaxes eran moito máis comúns na era da Web 1.0 dos anos 90 nos primeiros anos de 2000. Os mapas de imaxes a miúdo constituíron a base da navegación dun sitio web. Un deseñador crearía algún tipo de imaxe para indicar os elementos do menú e, a continuación, establecerá un mapa.

Os enfoques modernos estimulan o deseño sensible e usan follas de estilo en cascada para controlar a colocación de imaxes e hiperligazóns nunha páxina.

Aínda que a etiqueta do mapa aínda é compatible co estándar HTML , o uso de dispositivos móbiles con pequenos factores de forma pode provocar problemas de rendemento inesperados con mapas de imaxes. Ademais, os problemas de ancho de banda ou as imaxes rotas determinan o valor dun mapa de imaxe.

Entón, non dubide en seguir usando esta tecnoloxía estable e ben comprendida, sabendo que existen alternativas máis eficientes actualmente en voga cos deseñadores web.

Creando un mapa de imaxes

Consideracións

Alike posts

See Newest

Sapid posts