Cómo hacer el efecto de la página Rotoplas en casa

Buenos días betianos

La duda de hoy es como se llama este efecto:

Soluciones para el Hogar | Rotoplas

Más que nada requiero el nombre para conocer como se hace y buscar algún tutorial o aprender como hacerlo.

¿Cual? ¿el de la imagen parpadeante? es un gif.

por cierto es enorme

http://imagenes.rotoplas.com/images/bullet.gif

El del fondo seccionado con la imagen de la casa superpuesta y luego los indicadores justamente encima de las partes donde se desean.

Tiene agregado el efecto Tooltip con Javascript usando el Atributo Title 😛7:

Ahh lo de los indicadores es un tooltip

Tooltip | jQuery UI

lo del fondo seccionado no lo entendí muy bien, pero si es lo que pienso solo es poner varias imágenes con position absolute, o poner varios backgrounds png

Gracias por los datos! Entonces el tooltip es para los indicadores.

Memoadian, como es eso de position absolute?

- - - Actualizado - - -

memoadian dijo:

Ahh lo de los indicadores es un tooltip

Tooltip | jQuery UI

lo del fondo seccionado no lo entendí muy bien, pero si es lo que pienso solo es poner varias imágenes con position absolute, o poner varios backgrounds png

Hacer clic para expandir...

Y como hago para poner el tooltip donde yo quiero en la imagen?

Digamos que pongo una casa grande como background del div, entonces los tooltips con enlace como los coloco sobre la ventana o sobre la puerta?

Deberías colocar mediante css cada uno de esos puntos donde tu quieras, usando un position:absolute, y determinar un top y un left para cada uno. Por ejemplo:


Solo con ese código deberías ser capaz de colocar cada uno de los puntos a tu antojo a lo largo de la imagen.

Si colocas la imagen a pantalla completa, como se hace en la página que estás poniendo de ejemplo, te recomiendo que tengas cuidado, ya que si no creas una solución Responsive para la imagen de fondo, la imagen cambiará de tamaño en diferentes pantallas, lo que haría inútil haber colocado los puntos en la posición que tu querías.

Por lo tanto, la imagen que coloques deberá tener siempre el mismo tamaño y deberá estar siempre centrada e independiente del cambio del ancho del navegador. Además, deberás añadir una imagen de fondo que si que sea dinámica a lo largo de los diferentes anchos de pantalla.

Espero haberte ayudado. Un saludo.

CrewArty dijo:

Tiene agregado el efecto Tooltip con Javascript usando el Atributo Title 😛7:

Hacer clic para expandir...

:welcoming::welcoming::welcoming: 😛8:😛8:😛8: xD

Si es un tooltp :encouragement: