Ayuda con efecto

thecapo_10 · #1 (**permalink**) 24/07/2010, 03:39

Hola estoy necesitando saber como logra que cuando alguien en mi web cliquee un video ya sea de youtube, megavideo, etc se oscurezca el fondo, como tiene megavideo en su sitio

saludos

Adler · #2 (**permalink**) 24/07/2010, 06:59

Hola

Prueba con este

Código Javascript:

Ver original<html>
<head>
<title></title>
<script type="text/javascript">
function solonumeros(evt) {
var keyPressed = (evt.which) ? evt.which : event.keyCode
    return !(keyPressed > 31 && (keyPressed < 48 || keyPressed > 57));
}
 
 
function calculalo() {
    document.getElementById('elalto').value=parseInt((document.getElementById('elancho').value*662)/994);
}
 
 
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function iecompattest() {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
 
 
function cambialo() {
// Esto ha de estar antes que var cabecera_height
var ancho_video = document.getElementById('elancho').value;
var alto_video = document.getElementById('elalto').value;
    document.getElementById('elvideo').style.width=ancho_video;
    document.getElementById('elvideo').style.height=alto_video;
// Fin condicion
 
var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
//FF
//var cabecera_height =  document.getElementById('contenido').clientHeight;
//var pie_height =  document.getElementById('pie').clientHeight;
//var cabecera_width =  document.getElementById('contenido').clientWidth;
//IE
//var cabecera_height =  document.getElementById('contenido').scrollHeight;
//var pie_height =  document.getElementById('pie').scrollHeight;
//var cabecera_width =  document.getElementById('contenido').scrollWidth;
 
if (document.Element || document.body){
var cabecera_height =  document.getElementById('contenido').scrollHeight;
var pie_height =  document.getElementById('pie').scrollHeight;
var cabecera_width =  document.getElementById('contenido').scrollWidth;
} else {
var cabecera_height =  document.getElementById('contenido').clientHeight;
var pie_height =  document.getElementById('pie').clientHeight;
var cabecera_width =  document.getElementById('contenido').clientWidth;
}
 
 
var total_Height = parseInt(cabecera_height) + parseInt(pie_height);
 
//alert("Ventana disponible largo " + window_height)
//alert("Ventana disponible ancho " + window_width)
//alert("Ancho Video " + ancho_video)
//alert("Ancho Cabecera " + cabecera_width)
//alert("Total " +total_Height) 
 
    
 
        if (total_Height < window_height) { 
            document.getElementById('veocine').style.height= window_height;
        }
        else
        {
            document.getElementById('veocine').style.height=total_Height;
        }
 
        if (ancho_video < cabecera_width) {
            document.getElementById('veocine').style.width=window_width;
        }
        else
        {
            document.getElementById('veocine').style.width=parseInt(ancho_video)+20;
        }
 
}
 
 
 
 
function modocine() {
var cuentanos = 0;
var decimas = 0;
document.getElementById('veocine').style.display='';
while (cuentanos < 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos += 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modocine').style.display='none';
document.getElementById('modocine').style.visibility='hidden';
document.getElementById('modonormal').style.display='';
document.getElementById('modonormal').style.visibility='visible';
}
 
 
function modonormal() {
var cuentanos = 100;
var decimas = 1;
document.getElementById('veocine').style.display='none';
while (cuentanos <= 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos -= 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modonormal').style.display='none';
document.getElementById('modonormal').style.visibility='hidden';
document.getElementById('modocine').style.display='';
document.getElementById('modocine').style.visibility='visible';
}
 
 
function opacidad(valor) {
cuentanos = document.getElementById('veocine').style.MozOpacity*100;
switch (valor) {
 case "mas":
 if(cuentanos < 100) {
 cuentanos += 10;
 cuentanos = parseInt(cuentanos);
 decimas = cuentanos/100;
 document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
 document.getElementById('veocine').style.MozOpacity=decimas;
 document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
}
 break;
 case "menos":
 if(cuentanos > 30) {
 cuentanos -= 10;
 cuentanos = parseInt(cuentanos);
 decimas = cuentanos/100;
 document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
 document.getElementById('veocine').style.MozOpacity=decimas;
 document.getElementById('veocine').style.opacity=decimas;
 document.getElementById('veocine').style.khtmlOpacity=decimas;
 }
 break;
}
}
</script>
</head>
<body>
 
 
<div id="contenido" align="center" style="" valign="top">
<div id="veocine" style="overflow: auto; display: none; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 2; left: 0px; top: 0px; background-color: rgb(0, 0, 0);">
<div id="modonormal" style="margin-top: 20px; display: none;">
<input type="button" onclick="modonormal()" value="Desactivar Modo Cine"/>
<input type="button" onclick="opacidad('menos')" value="-"/>
<input type="button" onclick="opacidad('mas')" value="+"/>
</div>
</div>
 
<div align="center">
<i><font color="red">* Introduce unos valores numericos para cambiar el tamaño del video (ancho/alto)</font></i>
<br/>
<i><font color="red">* el cambio de tamaño no resetea la carga del video, puedes usarlo sin problemas.</font></i>
<div>
ANCHO: <input id="elancho" type="text" onkeypress="return solonumeros(event)" onkeyup="calculalo()" maxlength="4" size="10" value="390"/>
ALTO: <input id="elalto" type="text" disabled="disabled" onkeypress="return solonumeros(event)" maxlength="4" size="10" value="259"/>
<input type="button" onclick="cambialo()" value="Cambiar Tamaño"/>
<input type="button" id="modocine" onclick="modocine()" value="Activar Modo Cine"/>
</div>
 
 
<div style="z-index:3;">
<center>
<object  width="390px" height="259px">
<param name="movie" value="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="elvideo" src="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="390px" height="259px"></embed>
</object>
</center>
</div>
 
<br/>
 
<div id="pie" align="center" style="z-index: 3; font-family: verdana,arial; font-size: 12px; font-weight: bold;position:relative; bottom:2px;">
Resto de la p&aacute;gina
<br/>
Todos los videos ent&aactue;n alojados en servidor ajenos
</div>
 
</body>
</html>

Suerte