Zonas Interactivas en HTML con Imágenes SVG

En este video aprenderás a crear zonas o áreas interactivas utilizando imágenes SGV

[@INDE-SOFT]

Muchas gracias por compartir este video, me sirvió de mucho para el proyecto que estoy realizando.

[@joseignacioramalloquevedo8252]

Fabuloso el video. Muchisimas gracias. Abrazos desde Bolivia.

[@davidmarin1675]

Gracias Ricardo por compartir tus conocimientos, me ha servido mucho. Saludos

[@gonzalodecastro2550]

Excelente video! me sirvió como base para customizar el mapa a mi gusto. Saludos desde Argentina hermano.

[@diplo979797]

Excelente, tengo la intención de hacer un proyecto con un mapa de colombia y me tenia pensando como hacer lo y me salio como anilllo al dedo gracias

[@mantenimientorincon1459]

eres un duro te felicito por tu aporte ya te di like y me suscribí

[@VictorCaudillo]

Es sencillo y funciona perfecto, sólo estoy teniendo problemas con el responsive, la etiqueta svg define un ancho pero con propiedades absolutas, se ve de lujo en desktop en movil se corta o hace un scroll, gracias por el video

[@rodrigoojuarez2168]

tengo la misma situación jaja resolviste de alguna manera?

[@eddyperez4343]

ne width 100% al svg y se adapta a su contenedor, que para este caso es .mapadiv

[@ignaciofuentes1603]

muchas gracias, excelente material.

[@jlonso1840]

excelente aporte el video !

[@adriansas8884]

Para quien tenga problemas con el cambio de color de fondo etc le añado este código que es en html, me costo dar con ello asi que lo dejo a continuacion. repito el codigo va en el apartado html justo antes de acgregar el svg. Mapa interactivo body { background-color: #4169E1; } .mapadiv { width: 100%; margin: auto; background-color: #f0f0f0; /* Fondo del contenedor del mapa */ padding: 20px; } .mapadiv path { fill: #F0E68C; /* Color de relleno de los estados */ stroke: #ffffff; /* Color del borde de los estados */ stroke-width: 2; } .mapadiv path:hover { fill: #2ecc71; /* Color de relleno al pasar el ratón */ }

[@nahuelcesattilaluce1257]

buenísimo el video! era para 1080p!

[@davidsegura8407]

Si a alguien no se le cambiaba el color cuando pasa el mouse, prueben poner esto en el archivo css: .mapadiv path:hover { fill: #000; } Nada más cambian el color :)

[@enmanuelsd2811]

Gracias hermano, te deseo mucha prosperidad en lo que te propongas. Se los recomiendo, me funcionó al instante

[@josealfonzoinestrozarodrig9734]

A mi no se me pone el color del fondo azul no se como hacer para que me salga el color del fondo

[@rodrigocubillos2472]

Muchas gracias por este recurso

[@brendacosta23]

Muito bom o video, me ajudou muito!

[@AmitAntony.]

Gracias, Ricardo

[@harveyriascos2491]

Muchas gracias me sirvio bastante (Y)

[@besanz_sv]

Hola! Excelente❤ video! Tengo una duda, se puede poner que los colores sean diferentes para cada departamento?

[@Blacksheep-anime]

me gustaría saber si se le puede colocar a cada departamento una ventana flotante o emergente con el mapa de dicho departamento

[@dmarxo5021]

sabes como?

[@kaspersky1171]

Si se puede hay una etiqueta HTML que muestra una ventana flotante

[@zarcoplay]

Una pregunta se le puede dar estilo directamente a las en un map de una imagen que no sea SVG?

[@Kenethgt]

Excelente! ¿Cómo podría agregar un puntos específicos en el mapa? Algo como "📍", en algunos lugares específicos del mapa, ubicaciones que quisiera destacar. ¿Podrías explicarlo en un vídeo? por favor. Me gusta tu manera de enseñarlo. 💯

[@thomasvargas6707]

Tengo la misma duda ! jejej

[@sebasantelmo]

Javascript

[@Kenethgt]

@@sebasantelmo ¿Tienes el código?

[@neodo_imi_star]

Excelente video, pero tuve problemas con xlink:title no me aparece el título ¿que podria hacer?😅

[@ingenioswebdesign5766]

Tampoco logro los xlinks

[@cityfight6665]

Planeo hacer algo similar, solo que con divisiones de terrenos, el problema esta en que no encuentro una manera de generar id en los poligonos para que cuando un usuario de click en un poligono muestre la informacion del terreno seleccionado.

[@joaquinblanco]

Amigo de donde sacas kos mapas de ese estilo

[@andres089m9]

Ya hallaste una solución? Tengo un proyecto similar

[@josuepacheco2957]

muchas gracias, una consulta se puede hacer que al dar click en un ciudad esta mantenga el color activo?

[@MrSastoman]

hola gracias por tu contenido, me gustaria incluir la animacion de que el departamento se agrande cuando uno haga click, como podria darle este atributo? estaba pensando que en el archivo css debo poner algo asi como .mapadiv :size o algo asi pero no doy con el clavo...

[@nameteGM]

Se le podria poner como los globitos de markitas en algunos estados? A lo google maps?

[@franinclan]

Es posible dejar alguna provincia con otro color??

[@pb015]

Excelente video, me ha aclarado el camino para un proyecto que quiero llevar a cabo en mi trabajo, ahora, lo que no se es como traer el valor de los colores desde una base de datos. que cambie de acuerdo a el valor que tenga la base de datos. ¿alguna idea?

[@pb015]

@Carlos Iriarte una salida elegante! gracias por la sugerencia! la pondré en practica.

[@DanielAlvarez-yh1yx]

hola amigo, tienes alguna idea de como?, me hago la misma pregunta

[@astrixwr5662]

​@@DanielAlvarez-yh1yx Con javascript usando fetch y algun lenguaje del servidor que se conecte a la BD

[@christianandrade06]

Que super bien, me parecía imposible...

[@angelalucero8071]

Hola es igual solo con un departamento?

[@liberandotiempo6825]

¿Como crear un path de vectores por cada pieza del rompecabezas y luego unir como una sola imagen?

[@nameteGM]

Tengo una duda. En la pagina de sacar los mapas permite customizarlo. Pero no me da opcion para descargarlo despues de customizarlo

[@ratjea]

Muy buen tuto, pero por favor digame como ubicaria a san andres y providencia

[@MrSastoman]

amigo sabes que a mi no me aparecen los PATH, solo el ID de cada departamento..

[@liberandotiempo6825]

Creo que el comando path ya no se usa

[@janniorojascoach]

Busco un talento para hacer eso mismo del video...+una funcion extra. Me puede contactar?

[@damiancontreras8914]

Buenas, alguno sabe si aparte de volverlo interactivo se le puede agregar pines de puntos específicos en cada zona y no solo por zona?

[@appexperto6434]

conseguiste hacer eso?

[@josealfonzoinestrozarodrig9734]

no bro no me funciona cuando quiero poner el fondo en color azul

[@juliansalamanca3762]

no me sirve el xlink:tittle y me cuando creo el hover desde el CSS no me lo genera por los diferentes patchs Estoy trabajando desde el Dreamweaver no se si esto tengo alguna afectación

[@Berelen]

encontraste solución?

[@taniaiselaolivaresromero7806]

el xlink pense que no me funcionaba pero tenia que ver con el navegador que estaba utilizando

[@janieragualimpiamurillo8806]

hola, una pregunta, por que no se me aplican los colores al mapa y estoy haciendo el paso a paso, por que sera? alguien que me ayude plis

[@josealfonzoinestrozarodrig9734]

me pasa lo mismo

[@lesli4262]

@@josealfonzoinestrozarodrig9734 en mi css coloqué un path: .mapadiv path{ fill:black;/*contornoazul-negro*/ stroke:#083C6D;/*azul*/ stroke-width:5px; } .mapadiv path:hover{ fill:gold; }

[@kevingarcia5719]

Es demasiado dificil encontrar una con nombres , sin eso es imposible hacerlo

[@saraipineda6422]

muy bueno! me sirvió y resolvió mis dudas pero al final cortas muy feo tu platica ;) saludos

[@tutorialesprofe]

no entendí, lo finalizo como casi todos mis videos

[@luzsandoval4270]

no me funciona el xlink

[@luzsandoval4270]

el xlink:title

[@Berelen]

@@luzsandoval4270 pudiste resolverlo?... igual no me funciona :(

[@nosoyrobert1628]

A mi no me funciona >:v

[@penelopez7522]

Martin, para la próxima mas creatividad y menos niñas