ANIMAR IMAGEN TEXTOS DESCRIPTIVOS 
Autor: Octavio Luis L.
Visitado 1100,
Followers 1,
Compartido 0
Hola
Saludos a todos los colegas. Estoy ante un desafío. Un cliente me pide agrege una imagen animada, en la que hay distintas cosas de las que se amplia informacion.
Este es un link de ejemplo:
https://www.findernet.com/es/worldwide/page/smart-buildings
Agradeceré me puedan dar alguna pista o idea de como hacer algo como esto
Es decir una imagen, una ilustracion, en la que hay signos, por ejemplo un signo + o sea un hotspots que abre una ventana con info adicional o que contextualiza algo... logro explicarme?
Es posible hacerlo con website ?
Con que otra herramienta es posible hacerlo?
Cual sería el procedimiento básico?
Gracias y saludos !!!!
Publicado en
Hola Octavio, Eso es una animación sencilla, viendo tu post de WebAmimator Go, no creo poder mencionarlo como opción, muy aparte que esa versión solo sigue templates y no generaría lo que quieres.
En el mercado hay muchas herramientas, solo decidete por una, el ejemplo que muestras no lo veo complejo, solo es una imagen de fondo con simples botones (+) o (X) que muestran una imagen traslucida con información y links.
Revisa aquí hay muchas:
Hay muchas herramienta que te permiten probar antes de comprar, incluso las hay gratis, el problema siempre es aprender, pero como te digo si revisas ese efecto es sencillo, no creo que te tome mucho tiempo aprender a hacerlo.
Saludos.
Jorge M.
Hola Octavio,
Agregando ideas a lo que te propone Jorge, yo me puse a pensar en que lo que necesitas en este caso es una imagen de fondo, y lugar donde poner imagenes que sean el signo de + y que no se muevan de lugar con respecto a la imagen de forma, o sea que con objetos no se puede. Pero quiza podrias probar con una tabla, a la que le hagas coincidir las celdas con los lugares donde tienes que poner los signos de +. Luego simplemente a esos signos le asignas links donde pones la info en el tooltip, que te permite poner texto e imagen.
Es cuestion de probar, y la unica contra, es que esta tabla no sería responsiva. Quiza la imagen de fondo molesta en este caso si se mueve, pero se podria probar de dejarla fija, sin efectos paralax y con la medida ya justa (para que no cambie de tamaño si se tiene que ajustar al ancho de la pagina o del navegador.
Saludos colega.. suerte con ese proyecto! y despues si puedes pasanos el link para ver como lo has resuelto ok?
Estas cosas siempre son aprendizaje para todos...
Carlos A.
Autor
Gracias Jorge y Carlos
Por las sugerencias.
Voy a intentar la de aprender algo más, con los links que me pasó Jorge. Y la de Carlos, la había pensado mas o menos así, así que si no lo resuelvo con la primera, intentaré hacerla con tabla y la imagen de fondo.
Voy a experimentar.
Gracias a ambos por la atencion y las ideas !!!!
Excelente sugerencia de Carlos, me recordó otra que puedes hacer: Usar Mapas en una imagen con HTML, el problema es que como el caso de las tablas que menciona Carlos no es responsive, esto se soluciona con plugins y eso complica una vez más el proyecto, de todas maneras si deseas revisar estos tópicos te recomiendo:
Aunque estoy casi seguro que quien nos podría ilustrar un poco más es KolAsim
Saludos
Jorge M.
Autor
Esa del mapa en la imagen no la había pensado. Es real que varias mentes funcionan mejor que una. Inteligencia colectiva!!!
Creo que es la más indicada. Este fin de semana me pongo de lleno a tratar de resolver eso.
Gracias de nuevo por tu gran aporte Jorge!
Saludos !!!!