evitar clic sobre una capa

rex16 · #1 (**permalink**) 27/05/2012, 16:29

tengo un popup que al abrirse muestra una pagina html con un elemenyo flash que consegui en otra web, sucede que ese elemento flash tiene activada la opcion que al hacerle click dirige a dicha web, me gustaria hacer algo para evitarlo, he intentado meter el flash en un div con z-index 1 y un div contenedor padre con z-index 5 pero no funciona, creo recordar que una vez lei un tema que trataba esto y si se puede, podrian orientarme, gracias...

cristian_cena · #2 (**permalink**) 27/05/2012, 21:39

con z-index podes hacerlo, mira este tutorial: http://es.html.net/tutorials/css/lesson15.php

rex16 · #3 (**permalink**) 28/05/2012, 08:21

mira, auque el z-index lo hago bien y funciona sin el flash, cuando agrego el flash en el div de fondo por algun motivo pasa alfrente de todo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<style type="text/css">
#contenedor{
 position:absolute; 
top:0px; 
left:0px; 
z-index:1; 
width:600px;
height:600px; 
background-color:blue 
}

#superpuesto{
position:absolute; 
top:50px; 
left:50px; 
z-index:2; 
width:300px; 
height:300px; 
background-color:red
}
</style>

</head>

<body>

<div id="contenedor">
<embed src="http://www.poodwaddle.com/applets/worldclockes.swf" width="580" height="580" bgcolor="#ffffff" type="application/x-shockwave-flash" />
</div>

<div id="superpuesto">
<a href="http://www.google.com.co">google</a>
</div>

</body>
</html>

kseso? · #4 (**permalink**) 28/05/2012, 08:30

Creo que Cristian no verificó que en ese enlace no mencionan el caso de ser un objeto flash.
Pero usted si podría haber utilizado el buscador:
z-index+flash site:forosdelweb.com

garciasanchezdani · #5 (**permalink**) 28/05/2012, 08:42

Hola rex16, también puedes hacerlo con jQuery:

Código Javascript:

Ver original$('#micapa').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Saludos

rex16 · #6 (**permalink**) 28/05/2012, 09:06

Perfecto, muchas gracias muchachos lo pude hacer... gracias

rex16 · #7 (**permalink**) 28/05/2012, 12:18

Me apresure en decirlo... sucede que SI puedo superponer divs al flash y que tambien pude maquetar seis capas en diferentes partes y funciona en todos los navegadores,quedando asi:

este es el codigo:

Código HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

#contenedor{ position: absolute; top:0px; left:0px; z-index:1; width:580px; height:580px; background-color:blue }
#superpuesto1{position:  absolute; top:70px; left:146px; z-index:2; width:434px; height:510px; background-color:red; }
#superpuesto2{position: absolute; top:0px;left:0px; z-index:3; width:220px; height:247px; background-color: green}
#superpuesto3{ position: absolute;top:0px;left:0px; z-index:4; width:580px; height:25px; background-color:yellow}
#superpuesto4{position:  absolute;top:25px; left:570px; z-index:5; width:10px; height:50px; background-color:blue}
#superpuesto5{position: absolute; top:450px;left:0px; z-index:6; width:150px; height:130px; background-color:purple}
#superpuesto6{position: absolute; top:240px;left:0px; z-index:7; width:15px; height:230px; background-color:whithe}
</style>

</head>

<body>

<div id="contenedor">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="580" height="580" title="slip">
<param name="movie" value="http://www.poodwaddle.com/applets/worldclockes.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="http://www.poodwaddle.com/applets/worldclockes.swf" width="580" height="580" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>

<div id="superpuesto1">a</div>
<div id="superpuesto2"></div>
<div id="superpuesto3"></div>
<div id="superpuesto4"></div>
<div id="superpuesto5"></div>
<div id="superpuesto6"></div>

</body>
</html>

Pero sucede que cuando quito el color de fondo de los divs que estan arriba, en ie8 no sucede nada y el flash vuelve a quedar en primer plano, mientras que en los demas si se respeta el espacio, asi queda en ie8:

he provado varios cambios pero nada... podrian ayudarme, de que forma se puede solucionar esto..

kseso? · #8 (**permalink**) 28/05/2012, 13:15

Se encontró con las meigas de IE.
Mire aquí, al final, donde se simula en pointer-events para los IE.

Ahí tiene lo que le está ocurriendo.

rex16 · #9 (**permalink**) 28/05/2012, 14:58

Creo que no me sirve para lo que necesito, porque lo que podria hacer es agregar el pointer-events: none; al div que contiene el flash y desactivarlo y hacerlo funcionar en ie (que aun no pude) , pero sucede que no se debe desactivar la interaccion con todo el flash, solo con las partes cubiertas con los divs, y hay dos zonas que son interactivas... y no se me ocurre de que manera usar esa propiedad en los divs para que estando sin background tomen el cursor....

o es asi o no pillo la solucion, podrias aclararme un poco?

kseso? · #10 (**permalink**) 28/05/2012, 15:13

No le estoy recomendando el uso de pointer-events (ni con css ni con ningún otro método). Le sugiero que lea un artículo para que sepa qué le ocurre con z-index y ausencia de background.

La mención del artículo es para que descubriese lo último que mencionó:

Cita:

Pero sucede que cuando quito el color de fondo de los divs que estan arriba, en ie8 no sucede nada y el flash vuelve a quedar en primer plano, mientras que en los demas si se respeta el espacio, asi queda en ie8:

Y la explicación al bug, que está al final del artículo enlazado, bajo el epígrafe: "Las meigas de IE"

¿Me expliqué ahora?

Resumiendo.
En mi respuesta en #4 le doy la solucción para que los objetos en flash respeten el z-index y en #8 le digo la razón (es un bug) de lo que le ocurre y que expone en #7.
Y sólo es casualidad que la explicación a dicho bug la incluyese en un artículo que trata sobre el pointer-events y en el que al final sugiero una forma de emular dicha propiedad en los navegadores y versiones que no la soportan.

rex16 · #11 (**permalink**) 28/05/2012, 15:27

Bien, entiendo, ya me lo suponia que era de forma informativa mas no la solucion, pues gracias kseso? aprendi algo nuevo y sobre lo que poco o nada se habla... intentare con jquery como menciona el amigo @garciasanchezdani haber que tal, saludos...

kseso? · #12 (**permalink**) 28/05/2012, 15:33

Cita:

intentare con jquery

A lo dicho por usted me remito

Cita:

...pero sucede que no se debe desactivar la interaccion con todo el flash, solo con las partes cubiertas con los divs, y hay dos zonas que son interactivas...

¿Tiene la página en línea o puede subirla a un servidor? Coloque el enlace

rex16 · #13 (**permalink**) 28/05/2012, 16:17

La tengo en localhost y tambien usa un blog y un foro por lo que no podria subirla en este momento, esta es una captura del footer :

la pagina.html donde va el flash se abre en un lightbox y es relativamente simple solo se coloca lo necesario para mostrar el flash y ya..

ALGO COMO ESTO ... ahi puse el flash original y el flash tapado con las partes a desactivar... esas pártes que quiero desactivar es porque si clican sobre ellas seran redirigidos a la web de origen del flash..

pues ya intente con jquery y nada, no entiendo mucho..

en general es eso.

summaky · #14 (**permalink**) 28/05/2012, 17:57

Y ahora que has conseguido la superposición de las zonas que quieres "ocultar" al click, porque no sustituyes los colores por un gif transparente (un gif de 1x1 px transparente).

Tu css quedaría así:

#contenedor{ position: absolute; top:0px; left:0px; z-index:1; width:580px; height:580px; background-image: url('trans.gif') }
#superpuesto1{position: absolute; top:70px; left:146px; z-index:2; width:434px; height:510px; background-image: url('trans.gif')}
#superpuesto2{position: absolute; top:0px;left:0px; z-index:3; width:220px; height:247px; background-image: url('trans.gif')}
#superpuesto3{ position: absolute;top:0px;left:0px; z-index:4; width:580px; height:25px; background-image: url('trans.gif')}
#superpuesto4{position: absolute;top:25px; left:570px; z-index:5; width:10px; height:50px; background-image: url('trans.gif')}
#superpuesto5{position: absolute; top:450px;left:0px; z-index:6; width:150px; height:130px; background-image: url('trans.gif')}
#superpuesto6{position: absolute; top:240px;left:0px; z-index:7; width:15px; height:230px; background-image: url('trans.gif')}

Probado en local y funciona como quieres

rex16 · #15 (**permalink**) 29/05/2012, 06:32

oh si!!! summaky... como no haber visto esa opcion, gracias.

Ademas no hace falta que se repita en todo el div, la explicacion q nos da kseso? al bug dice "sin background", por lo tanto aunque sea una imagen de 1x1 que no se repita ya tendra un fondo, casi imperceptible pero tendra... eso fue lo que hice, la ventaja es que en los navegadores viejos (yo doy soporte a ie6) que no soportan transparencia solo se mostrara ese punto blanco de 1x1...

#superpuesto1{position: absolute; top:70px; left:146px; z-index:2; width:434px; height:510px; background-image:url(transparente.png); background-repeat:no-repeat;
background-position:bottom right}

Gracias de nuevo a todos