Los cuadros rojos flotantes son div con posición absoluta, el problema es el diseño responsivo de los cuadros rojos, conocen un método para hacerlos responsivos sin tener que hacer un media query por cada 30 px,
digo 30 px, por que el fondo digamos es una imagen de una granja y los cuadros rojos animalitos, entonces debe haber un animalito en el tejado de la granja otro en la puerta, uno parado en el piso etc... cuando cambia el tamaño de la pantalla (resposive) el fondo se adapta pero los animalitos no.
Los cuadros rojos deben de ser clicleables
Hasta ahora lo he intentando hacer de varias formas:
Una imagen png sin fondo en fullscreen por cada animalito, como un sistema de capas una sobre de otra, como no tiene fondo se ve como una sola imagen.
problema-> El responsivo no es optimo, no se puedes cliclear las imágenes
Con Jquery tomando las medidas de la pantalla y acomodar cada cuadro rojo con una operación matemática basado en top y left position utilizando resize para calcular en tiempo real y acomodar al cambio de la ventana,
problema-> mucho procesamiento para el navegador (son 60 animalitos), la ram que ocupa se dispara, no siempre quedan donde deberían de quedar y terminan montados en algunos casos.
con jquery face detection utilizando una imagen de fondo y con este plugin buscar a los animalitos para darle el evento click.
problema face detection no encuentra a los animalitos (cuadros rojos) y se cuelga el script.
media query, imagen clicleable éxito, imagen responsiva éxito. PROBLEMA hay que hacer muchos muchos muchos media jquery para cubrir todas las resoluciones
No quiero que me resuelvan la vida dándome un código, soy feliz si me pueden brindar opciones, ideas, conceptos, experiencias, conocimientos que no tengo.
En verdad que lo he intentado de todo y no queda, estoy seguro que debe de existir alguna forma sin tener que hacer mil media jquery.
Saludos colegas.