crear un agujero (hueco) en un div

ulisesc · #1 (**permalink**) 01/03/2015, 00:24

Hola, pues esa sería la pregunta... Me explico.

Una parte de la página, practicamente toda, va a ser de un color, y la idea es que en el medio haya un agujero para dejar ver la información que hay debajo (un mapa).
Mi interés es crear ese agujero en medio de la página con la hoja de estilos. Es posible o hay que tirar si o si, de J.S. o algún otro lenguaje??

Sería algo así:

<html style="width: 100%; height: 100%; margin: 0; padding: 0; text-align: center;">
<body style="margin: 0; padding: 0;">
<div id="menu">
--
--
--
--
</div>

<div id="main_box" style="width: 100%; height: 100%; background-color: #e1f7eb">


<div id="map-area" style="width: 100%; height: 75%;">
</div>
<div id="action Box">
</div >

Otra opción que estudio es que el fondo sea una imagen, color plano con un agujero como yo quiero, pero hay dos problemas. Al redimensionar la página el agujero varía de tamaño y ¿se puede dar un valor de transparencia a una imagen??
sería algo así:

<html style="width: 100%; height: 100%; margin: 0; padding: 0; text-align: center;">
<body style="margin: 0; padding: 0;">
<div id="menu">
--
--
--
--
</div>

<div id="main_box" style="width: 100%; height: 100%; background-image: url(fondo.png); background-repeat: no-repeat; background-size: cover;">

<div id="map-area" style="width: 100%; height: 75%;">
</div>
<div id="action Box">
</div >

Perdón por el tocho!!

siddartha23 · #2 (**permalink**) 01/03/2015, 11:38

Te faltó un dato: ¿Quiéres que el usuario pueda interactuar con el mapa o solo sería una mapa visual?

Por otro lado, sabes que existe la propiedad border-radius no?? quizás sea mas factible poner el mapa por encima de todo...

ulisesc · #3 (**permalink**) 01/03/2015, 12:37

Claro, el usuario interactua con el mapa. Podra moverse, ampliar y reducir, pero eso ya será un proceso de programación y yo de momento no me meto ahí.
El mapa se vería con una capa que lo cubre (con grados de transparencia) y la parte en la que interactua sería el hueco (circular) de esa capa.
Complicado no?

Zeromm · #4 (**permalink**) 01/03/2015, 12:43

no es complicado, eso con el tipico efecto parallax que está tan de moda ya lo consigues sin problema.

ulisesc · #5 (**permalink**) 01/03/2015, 13:32

Cita:

Iniciado por Zeromm

no es complicado, eso con el tipico efecto parallax que está tan de moda ya lo consigues sin problema.

Ajá, voy a buscarlo a ver de que trata... les comento si es lo que ando buscando y me sirve... Gracias!

siddartha23 · #6 (**permalink**) 01/03/2015, 18:11

Eso no es parallax, parallax es un efecto para imagenes de fondo. Olvídate de poner el mapa de fondo ya que cualquier div o elemento que se encuentre encima de él así sea transparente va evitar que puedas usar evento como hover o click en el mapa, peor si tienes pensado usar una imágen con un hueco, al hacer pasar el mouse por el hueco se activa el hover de la imagen no lo que esté debajo, lo que tienes que hacer es poner ese mapa en un div circular por encima de todo...

AngelKrak · #7 (**permalink**) 01/03/2015, 23:08

alguna demo o algo asi amig@? aun que sea en Photoshop para poder ayudarte a lo que quieres especificamente :D

ulisesc · #8 (**permalink**) 02/03/2015, 04:39

claro, parallax no me sirve... subo una imagen para que se hagan una idea...

ulisesc · #9 (**permalink**) 02/03/2015, 04:48

sería una capa debajo (el mapa) y otra capa encima transparente con el hueco donde se verá el mapa nitido.
Al probar con un .png funciona, pero sólo para valores de ancho y alto fijos, y lo necesito con valores de %. para redimencionar las ventanas, sino el hueco se distorcionaría y pierde el norte, por así desirlo.
La solucion sería algo como una capa superior, una función o valor, que en un determinado lugar borrara la capa anterior (capa de color) dejando el hueco visible con la capa donde está el mapa.
Ufff....

AngelKrak · #10 (**permalink**) 02/03/2015, 07:20

pues si lo unico que quieres es ese "agujero" has un div Fixeado con Border Radius y listo >_<

pzin · #11 (**permalink**) 02/03/2015, 08:28

Cita:

Iniciado por AngelKrak

pues si lo unico que quieres es ese "agujero" has un div Fixeado con Border Radius y listo >_<

Antes de publicar una solución piensa primero lo que vas a escribir. Eso que dices no va a funcionar como se pide.

ulisesc · #12 (**permalink**) 02/03/2015, 09:53

Cita:

Iniciado por AngelKrak

pues si lo unico que quieres es ese "agujero" has un div Fixeado con Border Radius y listo >_<

Claro, solo que ese div deberia de tener la propiedad de borrar el contenido de la capa anterior (la del color plano)
Tendria que tener el poder de : delete-area; o algo asi!!

AngelKrak · #13 (**permalink**) 02/03/2015, 18:29

no pues quien sabe entonces >_< ahi lo unico que veo es una rueda que te muestra lo mismo con ella que sin ella jajajaja xD solo se ve mas blanco con la rueda >_< y si quieres eso del div de delete-area seria eso en JS >_<

ulisesc · #14 (**permalink**) 03/03/2015, 16:40

Ufff... esperaba poder solucionarlo con los estilos en CSS,
voy a ver si en el Foro del JS, lo puedo resolver entonces...
Gracias a todos por el interés, un saludo!!