Foros del Web » Creando para Internet » Diseño web »

Insertar efecto nieve en pagina con capas

Estas en el tema de Insertar efecto nieve en pagina con capas en el foro de Diseño web en Foros del Web. Tengo esta pagina web con capas: <!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> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; ...
  #1 (permalink)  
Antiguo 01/01/2009, 11:12
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 15 años, 11 meses
Puntos: 0
Insertar efecto nieve en pagina con capas

Tengo esta pagina web con capas:

<!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>
<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script language="Javascript">
function capa(Datos)
{
document.getElementById(Datos).style.visibility="V isible";
}

///////////////////////////////////////////////////////////
function ocultar(Datos){
document.getElementById(Datos).style.visibility="h idden";
}
///////////////////////////////////////////////////////////

</script>


</head>
<body>

<div class="Estilo1" id="Layer1">
<p>
<div align="center" class="Estilo2">Daniel </div>
</div>

<div id="Layer2">
<div align="center">
<p>&nbsp;</p>

<!-- ----------------------------------------------------------------------- -->
<p><a href="#" class="Estilo4" onclick="ocultar('Libre');ocultar('Formulario');oc ultar('Imagenes');capa('Datos')" >Datos</a></p>
<p><a href="#" class="Estilo4" onclick="ocultar('Datos');ocultar('Formulario');oc ultar('Imagenes');capa('Libre')" >Libre</a></p>
<p><a href="#" class="Estilo4" onclick="ocultar('Datos');ocultar('Libre');ocultar ('Imagenes');capa('Formulario')" >Formulario</a></p>
<p><a href="#" class="Estilo4" onclick="ocultar('Datos');ocultar('Libre');ocultar ('Formulario');capa('Imagenes')" >Imagenes</a></p>
<!-- ----------------------------------------------------------------------- -->
</div>
</div>
<div id="Datos">
<div align="center" class="Estilo3">
<p>&nbsp;</p>
<p>Datos personales: </p>
<p>&nbsp;</p>
<ul>
<li>
<div align="left">Nombre:Daniel</div>
</li>
</ul>
<ul>
<li>
<div align="left">Apellidos:</div>
</li>
</ul>
<ul>
<li>
<div align="left">Fecha Nacimiento: </div>
</li>
</ul>
<ul>
<li>
<div align="left">Domicilio: </div>
</li>
</ul>
<ul>
<li>
<div align="left">Telefono : </div>
</li>
</ul>

</div>
</div>
</div>
<div id="Libre">

</div>
<div id="Formulario">
<FORM ACTION="mailto:[email protected]?subject=Datos Formulario" METHOD="post" ENCTYPE="text/plain">
<H2>Introduzca su información de contacto </H2>

<P><U>N</U>ombre Completo :
<input type="text"name ="Nombre" accesskey="N" size="20">
</P>
<P>E-<U>m</U>ail :
<INPUT TYPE="text" NAME="Email"ACCESSKEY="M" size="20"></P>
<P>D<U>i</U>rección : <BR>
<TEXTAREA COLS= "40" ROWS= "4" NAME= "Dirección"ACCESSKEY="i"></TEXTAREA></P>
<P><U>T</U>eléfono :
<INPUT TYPE="text" NAME= "Teléfono" ACCESSKEY="T" size="20"></P>

<P><U>E</U>dad :
<INPUT TYPE= "text" NAME= "Edad" ACCESSKEY="E" size="20"></P><BR>

<TABLE CELLSPACING = "4">
<TR>
<TD VALIGN="top" WIDTH="150"> Sexo:<BR>

<LABEL FOR="Hombre">
<INPUT TYPE="radio" NAME="Sexo" VALUE="Hombre" ID="Hombre" CHECKED>Hombre<BR>
</LABEL>

<LABEL FOR="Mujer">
<INPUT TYPE="radio" NAME="Sexo" VALUE="Mujer" ID="Mujer" >Mujer<BR>
</LABEL>

</TD>


</TD>
</TR>

</TABLE>

<LABEL FOR="ofertas">
<BR><INPUT TYPE="checkbox" NAME="ofertas" VALUE="información Ofertas" ID="ofertas"CHECKED>
Deseo recibir información sobre las actualizaciones de esta pagina.<br>
</LABEL>

<LABEL FOR="Novedades"></LABEL><LABEL FOR="Servicios"><BR>
</LABEL>

<TABLE>

<TR>
<TD VALIGN="top">¿En caso de ser necesario como desea que contactemos con usted ?<BR>
<br>

<SELECT NAME="Contacto">

<OPTION VALUE="TFNO"SELECTED>Por teléfono</OPTION>
<OPTION VALUE="EMAIL">Por correo electrónico</OPTION>
<OPTION VALUE="CODPOSTAL">Por correo postal</OPTION>

</SELECT>
</TD>
</TR>

<TABLE>

<TD VALIGN="top"> <BR> Que tipo de informacion le interesa :" Pulse CTRL para seleccionar mas de una" <BR>


<SELECT NAME="Intereses"MULTIPLE SIZE = 5>
<OPTION VALUE="Sistemas Operativos" >Sistemas Operativos</OPTION>
<OPTION VALUE="Bases de Datos"SELECTED>Bases de Datos</OPTION>
<OPTION VALUE="Paginas Web" >Paginas Web</OPTION>
<OPTION VALUE="Hardware" SELECTED>Hardware</OPTION>
<OPTION VALUE="Redes" SELECTED>Redes</OPTION>

</TR>

</TABLE>

<P> Si ya esta registrado en nuestra pagina introduzca su clave: </P>
<P>Clave de acceso: <INPUT TYPE="password" NAME="Clave" size="20">
</P>
<P><INPUT TYPE="hidden" NAME="dai205" VALUE="Prueba dato oculto">
<input type="Submit" name="Send" value="Enviar" alt="Enviar los datos">
<input name="reset" type="reset" value="Borrar">
</P>
</FORM>
</div>
<div id="Imagenes">
<table width="1020" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="282" height="63"></td>
<td width="150">&nbsp;</td>
<td width="150"></td>
<td width="150"></td>
<td width="288">&nbsp;</td>
</tr>

<tr>
<td height="150"></td>
<td valign="top"><img src="Imagen1.JPG" width="150" height="150" /></td>
<td></td>
<td valign="top"><img src="Imagen2.JPG" width="150" height="150" /></td>
<td></td>
</tr>

<tr>
<td height="150"></td>
<td>&nbsp;</td>
<td valign="top"><img src="Imagen3.JPG" width="150" height="150" /></td>
<td></td>
<td></td>
</tr>

<tr>
<td height="150"></td>
<td valign="top"><img src="Imagen4.JPG" width="150" height="150" /></td>
<td>&nbsp;</td>
<td valign="top"><img src="Imagen5.JPG" width="150" height="150" /></td>
<td></td>
</tr>

<tr>
<td height="47"></td>
<td>&nbsp;</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

</body>
</html>

Y quiero aplicarle el efecto nieve a la capa llamada libre para ello uso este script cogido de internet pero no hay forma de que funcione solo funciona en un trozo muy pequeño de la capa llamada libre

<script>

// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=35

// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")

// Tipo de letra de los copos
var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Valor o letra de los copos
var nieve_letra="*"

// velocidad de caida
var nieve_velocidad=0.6

// tamaño mas grande de los copos
var nieve_cantidadsize=30

// tamaño mas pequeño de los copos
var nieve_chico=8

// 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
var nieve_zona=1

var nieve=new Array()
var marginbottom
var marginright
var timer
var i_nieve=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browse rinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function aleatorio(range) {
rand=Math.floor(range*Math.random())
return rand
}

function initnieve() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var nievesizerange=nieve_cantidadsize-nieve_chico
for (i=0;i<=nieve_cantidad;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
nieve[i]=document.getElementById("s"+i)
nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]
nieve[i].size=aleatorio(nievesizerange)+nieve_chico
nieve[i].style.fontSize=nieve[i].size
nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]
nieve[i].sink=nieve_velocidad*nieve[i].size/5
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)
nieve[i].style.left=nieve[i].posx
nieve[i].style.top=nieve[i].posy
}
movenieve()
}

function movenieve() {
for (i=0;i<=nieve_cantidad;i++) {
crds[i] += x_mv[i];
nieve[i].posy+=nieve[i].sink
nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);
nieve[i].style.top=nieve[i].posy

if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=0
}
}
var timer=setTimeout("movenieve()",50)
}

for (i=0;i<=nieve_cantidad;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+nieve_cantidadsize+"'>"+nieve_letra+"</span>")
}
if (browserok) {
window.onload=initnieve
}
</script>

A ver si alguien me puede ayudar ya que no hay forma de hacerlo funcionar
  #2 (permalink)  
Antiguo 01/01/2009, 11:12
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 15 años, 11 meses
Puntos: 0
Respuesta: Insertar efecto nieve en pagina con capas

La hoja de estilos que uso es esta : style.css

#Layer1 {
position:absolute;
left:1px;
top:1px;
width:150px;
height:100px;
z-index:100;
background-color: #330066;
border:5px;
border-color:#CCFF00;
border-style:double;
visibility: visible;
}
#Layer2 {
position:absolute;
left:1px;
top:112px;
width:150px;
height:470px;
z-index:100;
background-color: #0000FF;
border:5px;
border-color:#CCFF00;
border-style:double;
visibility: visible;
}
#Datos {
position:absolute;
left:163px;
top:1px;
width:1024px;
height:580px;
z-index:100;
background-color: #FFFF66;
border:5px;
border-color:#CCFF00;
border-style:double;
visibility: hidden;
}

#Libre {
position:absolute;
left:163px;
top:1px;
width:1024px;
height:580px;
z-index:200;
background-color: #FFFF66;
border:5px;
border-color:#CCFF00;
border-style:double;
visibility: hidden;
}
#Formulario {
position:absolute;
left:163px;
top:1px;
width:1024px;
height:580px;
z-index:200;
background-color: #FFFF66;
border:5px;
border-color:#CCFF00;
border-style:double;
Overflow: auto;
visibility: hidden;
}
#Imagenes {
position:absolute;
left:163px;
top:1px;
width:1024px;
height:580px;
z-index:200;
background-color: #FFFF66;
border:5px;
border-color:#CCFF00;
border-style:double;
visibility: hidden;
}
#Layer4 {
position:absolute;
left:100px;
top:0px;
width:903px;
height:590px;
z-index:100;
background-color: #999999;
visibility: visible;
}
.Estilo1 {font-family: Arial, Helvetica, sans-serif}
.Estilo2 {
color: #CCFF00;
font-weight: bold;
}
.Estilo3 {
font-size: 36px;
font-weight: bold;
}
.Estilo4 {color: #CCFF00; font-weight: bold; font-size: 24px; }
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:30.