Mapa interactivo html css
Mapa interactivo html css en línea
mapa geográfico interactivo con svg y javascript
No soy un codificador de CSS limpio, así que esto puede ser el quid de mi problema … pero … He improvisado un mapa interactivo de este tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
Mi problema es que quiero que la leyenda del mapa haga lo mismo que los rollovers del mapa. He llegado a una solución torpe que funciona (etiquetada como ‘1509’), pero no bien en todos los navegadores, y eso me dice que me he equivocado en algún sitio.
Utilizamos un mapa de imágenes con etiquetas de anclaje como «puntos calientes». Usamos CSS para posicionar absolutamente estos «puntos calientes» en la ubicación adecuada y hacemos el «truco» básico del sprite de la imagen de fondo, lo mismo que hiciste en tu código original.
Sin embargo, he actualizado su imagen sprite para tener dos imágenes «hover». Cuando se hace un mapa de imagen hover con puntos de imagen no cuadrados (como edificios que se superponen entre sí), un solo estado hover tiene problemas con un icono «vecino» que aparece en la rebanada de punto caliente. Esto se debe a que los bloques HTML son cuadrados y no pueden dibujar formas extrañas. Lo solucionamos con estados de imágenes adicionales para que los vecinos sigan apareciendo sin resaltar.
mapa de imágenes html
Sounds like you want a simple imagemap, I’d recommend to not make it more complex than it needs to be. Here’s an article on how to improve imagemaps with svg. It’s very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you, Option (B) is good if you don’t want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it’s not very easy to create a Zoomable map using HTML5 Canvas, maybe there are some other ways too that I’m not aware of.
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map – it still didn’t work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka – a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function «$» to «jQuery» (or other handler) and it works perfect. :]
html5 mapa del mundo
Parece que quieres un imagemap sencillo, te recomendaría no hacerlo más complejo de lo necesario. Here’s an article on how to improve imagemaps with svg. It’s very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map – it still didn’t work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka – a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function «$» to «jQuery» (or other handler) and it works perfect. :]