HTML - link en mapa de PixelMap

 
Vista:

link en mapa de PixelMap

Publicado por javi (2 intervenciones) el 19/11/2016 14:48:27
Hola, estoy intentando poner links en un mapa de PixelMaps de Amcharts que viene dividido por paises y no se como ponerlo... alguien me puede ayudar? Muchas Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 74
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

link en mapa de PixelMap

Publicado por txema (10 intervenciones) el 20/11/2016 11:24:29
Hola Javi:

En HTML5 la forma de hacerlo es la siguiente:

1.- Insertamos la imagen de la forma habitual, añadiendo el atributo usemap a la que asignaremos un nombre. Ejemplo:
1
<img src="ruta_de_imagen/mapa.png" alt="Mapa de imágenes" width="300" height="214" border="0" usemap="#mymapa">

2.- Generamos el tag <map></map> asignándole el nombre que hemos dado en usermap
1
2
<map name="mymapa">
</map>

3.- Dentro del tag <map> insertaremos tantas <area ... > como zonas de enlace queramos añadir.
Dentro de <area> insertamos los siguientes atributos:
alt (opcional) como texto alternativo
shape que nos indica el tipo de área, pudiendo ser:
- shape=“rect” Área rectangular. La definiremos desde los puntos superior izquierdo e inferior derecho.
- shape=“circle” Área circular. Indicarle el punto del centro de la circunferencia y el radio del mismo.
- shape=“poly” Se creará una zona personalizada. Indicamdo los diferentes puntos del polígono y siguiendo el camino que hemos trazado para hacerlo.
coords Los puntos que necesitamos definir según el tipo de área elegido lo haremos mediante pares de números correspondiendo a la ubicación de cada píxel (punto) siendo el punto 0,0, el extremo superior izquierdo de la imagen y (conforme al alto y ancho de la imagen definida previamente) el punto 300, 214, sería el punto inferior derecho.
href Indicaremos el enlace al destino deseado (link)..

Así, nuestro código completo podría ser (modificando las coordenadas a los puntos deseados):
1
2
3
4
5
6
<img src="ruta_de_imagen/mapa.png" alt="Mapa de imágenes" width="300" height="214" border="0" usemap="#mymapa">
<map name="mymapa">
<area alt="Página de area 1" shape="circle" coords="148,154,44" href="area1.html">
<area alt="Página de area 2" shape="rect" coords="11,77,288,105" href="area2.html">
<area alt="Página de area 3" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46,162,52,160,61" href="area3.html">
</map>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

link en mapa de PixelMap

Publicado por javi (2 intervenciones) el 20/11/2016 12:26:54
Muuuchas Gracias Txema, aún no he tenido el momento de hacerlo... a ver si funciona y lo hago bien...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar