Crear zonas calientes en mapa: ¿Cómo hacerlo en WordPress?

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
¡Usuario popular!
Supongo que muchos habéis conocido los mapas con zonas calientes donde al hacer clic en determinada zona el mapa te llevaba a un link concreto

Estoy viendo la posibilidad de hacerlo en WordPress pero ni idea de qué deba usar, o cómo deba hacerlo

Agradezco aportes al respecto
 
La verdad nunca habia escuchado de esta tematica, aunque seguro que hay un plugin para eso, siempre hay un plugin para hacer tal o cual cosa en Wordpress, o si no, pues te lo programan y listo ! Siento no poder ayudarte mas !
 
Yo intenté hacer un mapa de España con links en cada provincia divididos por zonas pero nunca lo terminé.

Intenté hacerlo con dreamweaver, fireworks e incluso con css.
 
cocoidal dijo:
Yo intenté hacer un mapa de España con links en cada provincia divididos por zonas pero nunca lo terminé.

Intenté hacerlo con dreamweaver, fireworks e incluso con css.
Hacer clic para expandir...

pero me tocaría usar iframes, sería una locura, además no sé si funcione bien insertado desde otro programa...
 
Pero quieres hacer un mapa ? de un país o algo asi ? o es otra cosa y ademas te pregunto si es con formas irregulares o con formas regulares ? no creo que haya plugin para eso, pero de porderse si debe.
 
Es para hacer un mapa de una ciudad para un buscador de Inmuebles, que al hacer clic en determinadas zonas lleve las casas que hay en ese sector, eso creo que lo puedo hacer con shortcodes del plugin que estoy usando (WP Property) , pero claro, no genera mapas con zonas calientes, aunque sí carga mapas de Google, pero en las descripciones de las propiedades

Lo otro que se me ocurre es hacerlo en flash y vincularlo

Extraño que nadie haya pensado en algo así, en los 80 eran muy famosos esos tipos de mapas... casi todas las webs tenían algunol...
 
Es algo así lo que buscas?? Enlace eliminado

Lo hice en dw, es una imagen y a cada persona le puse un link distinto. El código que use es este:
Insertar CODE, HTML o PHP: 
<p><img src="http://www.mi-blog.info/GALAXY-Smartphones-Lifestyle-image-520x260.jpg" width="520" height="260" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="2,1,129,265" href="http://forobeta.com" target="_blank" alt="ForoBeta" />
    <area shape="rect" coords="133,4,256,255" href="http://www.mi-blog.info" target="_blank" alt="Mi blog" />
    <area shape="rect" coords="267,5,389,257" href="http://google.com" target="_blank" alt="google" />
    <area shape="rect" coords="397,8,522,260" href="http://yahoo.com" target="_blank" alt="yahoo" />
  </map>
</p>

Espero que te sirva
 
sí, exacto, pero ¿cómo insertaste el código? copiando y pegando?
 
no, en dreamweaver, cuando colocas una imágen, en la pestaña de "propiedades" en la parte inferior puedes dibujar esos mapas. Los más fáciles son los rectángulos, pero puedes hacer poligonos también, aunque creo que no funcionan en wordpress.

Para insertar el código sólo copialo y pégalo, en el modo de edición "html", y así publica. Si te pasas a la vista "Visual" antes de publicar, cambia el código y no funciona bien.
 
ok, hay algunos plugins para mantener el código html, pero es una alternativa, alguien debería crear un plugin para generar las regiones directamente en wordpress, aunque entiendo que con los avances de flash y otras tecnologías, ya han caído en desuso...
 
lo mejor es lo que ha dicho khaos, usa dreamweaver, y abres la imagen y luego, de forma visual, vas eligiendo las zonas y añadiendolas un link, eso te dara un codigo en el que solo tienes que modificar el link de la imagen. Yo lo hice para el diseño de una pagina de una empresa que tenia distintos asociado en españa pero, OJO: no cambies el tamaño de la imagen si no es en el mismo programa porque si no las coordenadas no coincidiran!
 
Tienes 2 opciones:

1. hacer el mapa con flash, es muy fácil.
2. hacer el mapa con sprites.
 
Sube tu imagen aqui y copia las areas shape

Enlace eliminado

Esto creara todas las areas con sus enlaces, que es lo que tiene khaos puesto. No se si me explico...

La segunda opción creas una imagen como base, y posiciones el resto encima con las propiedades del css. Esta opción la veo mejor y más personalizable. Ya que puedes poner que cambie de imagen o color al pasar el ratón por encima y algunas cositas más un saludo y espero que te sirva
 
Gracias por los aportes

De lo sprites sí que me perdí...
 
Me diste una idea e hice un tutorial sobre como crear un mapa de imagen en html lo puedes ver aqui, y el ejemplo online + la descarga

Enlace eliminado

Espero que te sirva
 
ok, gracias, mi duda no era con crear mapas de imágenes en sí, sino que mi duda era cómo integrarlos en WordPress o si WordPress tenía alguna herramienta para no recurrir a soluciones de terceros, pero os agradezco mucho la ayuda
 
Pues mete el codigo html en una pagina de tu wordpress, aunque este no lo acepta directamente puedes usar un iframe. Subir el codigo a otro lado y decirle

<iframe src="ruta_de_tu_mapa_de_imagen" frameborder="0" width="ancho" height="alto"></iframe>


O bien metes el codigo directamente en los archivos de wordpress, aunque la opción facil es la del iframe en una pagina. Espero te sirva un saludo
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

ramonjosegn
Analiza tu web (incluso "zonas calientes")
2
Respuestas
38
Visitas
7K
byNiko
B
Atrás
Arriba