| Estos anuncios
flotantes que estamos acostumbrados
a ver en páginas como ya.com,
terra, lycos... están basados
en capas (o layers) a las que se le
da en un momento determinado la característica
de visibilidad o no. Es decir tú
puedes tener en una página
web una capa situada por encima del
resto del contenido de la web, ocupando
un espacio visible predominante con
respecto al resto de elementos de
la web. En el caso de que la web utilice
más capas, es importante observar
el z-index de esa capa, y tener en
cuenta de que debe ser superior al
de las demás existentes en
el documento.
Y para su cierre u ocultación,
no hace falta el buscar complicados
scripts por internet o programarlos
a mano. Con los propios medios de
dreamweaver, utilizaremos en comportamiento
"show/hide layers" o "mostrar
u ocultar capas" situado en la
ventana de comportamientos (behaviours)
de dreamweaver. Este comportamiento
al aplicarlo, nos inserta en la cabecera
de la web estas funciones:
| <script
language="JavaScript"
type="text/JavaScript">
<!-- function MM_reloadPage(init)
{ //reloads the window if Nav4
resized
if (init==true) with (navigator)
{if ((appName=="Netscape")&&(parseInt(appVersion)==4))
{
document.MM_pgW=innerWidth;
document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }
}
else if (innerWidth!=document.MM_pgW
|| innerHeight!=document.MM_pgH)
location.reload();
} MM_reloadPage(true);
function MM_findObj(n, d) {
//v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
if(!(x=d[n])&&d.all)
x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)
x=d.getElementById(n); return
x;
}
function MM_showHideLayers()
{ //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2);
i+=3) if ((obj=MM_findObj(args[i]))!=null)
{ v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v; }
}
//-->
</script> |
Que sin pasar a analizar, nos permitirá
ocultar la capa flotante mediante
un enlace "cerrar" que pongamos
en la parte superior de nuestra capa.
En el ejemplo1 que he preparado, podéis
ver como inserto una capa por encima
del contenido de la web y mediante
un enlace situado dentro, podemos
ocultar esa capa. Un inciso, esa capa
debe estar identificada, es decir,
debe tener un "id" para
que funciones correctamente. Esto,
traducido al código queda algo
así:
<div id="capa01"
style="position:absolute;
width:200px; height:262px;
z-index:1; left: 246px; top: 83px;
background-color: #990000;
layer-background-color: #990000;
border: 1px none #000000;">
<a href="#" onClick="MM_showHideLayers('capa01','','hide')">Cierrame!!</a></div> |
A partir de aquí, ya es echarle
imaginación. En el ejemplo2
lo que tenemos es una imagen gif transparente,
pero con la misma funcionalidad exactamente:
<div id="capa01"
style="position:absolute;
width:200px;
height:149px; z-index:1; left:
169px; top: 125px;"><img
src="images/donpaco.gif"
width="339" height="170"
border="0" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="304,14,328,36"
href="#"
onClick="MM_showHideLayers('capa01','','hide')">
</map>
</div> |
En este caso el área del botón
no es ni más ni menos que un
mapa html. Y en el ejemplo 3 he preparado
un pequeño flash, que quedaría
insertado de la siguiente forma:
<div id="capa01"
style="position:absolute;
width:344px; height:155px; z-index:1;
left: 169px; top: 125px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"............"
width="339" height="170">
<param name="movie"
value="swf/donpaco.swf">
<param name="quality"
value="high">
<param name="wmode"
value="transparent">
<embed src="swf/donpaco.swf"
width="339" height="170"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
wmode="transparent"></embed>
</object>
</div> |
Dos cosas importantes, aquí.
La capa que contiene al flash, debe
ser transparente, es decir sin ningún
color de fondo (esto es aplicable
al ejemplo2 también) y la película
de flash debe tener el atributo de
"wmode" en "transparent".
El botón que desde el flash
nos permitirá ocultar la capa
tendría estas acciones:
on (press) {
stopAllSounds ();
getURL ("javascript:MM_showHideLayers('capa01','','hide')");
} |
Bueno, podeis bajar
los ejemplos de aquí: http://www.fcomoreno.net/intersticial/archivos.zip
Porque es mejor verlo con los ejemplos.
Y ahora es que le echeis creatividad
para hacer que se oculte tras un tiempo,
que la capa se coloque en un sitio
fijo... se me ocurren muchas cosas.
Yo, me voy a fumar un cigarrito. :-)
Salu2
|
