Make your own free website on Tripod.com

Esta generalmente es una etiqueta SPAN y DIV y puede ser colocada en cualquier parte de la pantalla.
Con las etiquetas LAYER, podremos hacer lo mismo, la diferencia es que esta etiqueta la reconoce Netscape y las ultimas versiones de I.E ( 5.0++ ).
Los links que los siguen en mis páginas, no es ni mas ni menos que un Layer que dentro tiene un comando Java para que se pueda desplazar por la pantalla ese Layer.
Hasta ahora hemos visto que tanto imágenes como textos, Applets de Java, etc, solo se podrían colocar o bien a la derecha, izquierda o centrado; con el Layer, esta barrera se vencen ya que se puede colocar cualquier objeto, en la parte de la pantalla que quieramos.
Supongamos que tenemos el siguiente Layer:

<div id="Layer2" style="position:absolute; width:178px; height:81px; z-index:5; left: 577px; top: 334px; visibility: visible">

Donde:
id = es el nombre, por cada uno que agreguemos, deberemos de cambiar el nombre de este.
style = nos da la aposición donde se ubica.
width, height, left, top = es la distancia en pixels de estos.
Bien, ahora supongamos que quiero poner un texto dentro de este y ponerlo en la parte de la pantalla que quiera. Para ello le insertare el siguiente parámetro.

<div id="Layer2" style="position:absolute; width:230px; height:28px; z-index:1; left: 331px; top: 540px">
< font color="#0000FF" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b>
El texto aparecerá en color azul.
</font>
</div>

El texto aparecerá en color azul

 

Note los parámetros para este texto ( width, height, left, top ), esto nos indica en que posición de la pantalla se encuentra el texto.
Si lo deseamos podremos insertar a este mismo texto una tabla dentro de este, de la siguiente forma.

<div id="Layer2" style="position:absolute; width:355px; height:45px; z-index:2; left: 172px; top: 826px">
<table width="104%" border="1" cellspacing="1" cellpadding="1" height="44" align="left">
<tr>
<td>< font color="#0000FF" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b><a href="mailto:cx1ddr@internet.com.uy">Pulse aquí para mandarme un correo electrónico, gracias por leer este manual</a>
</b></font></td></tr>
</table>
</div>
Este se vera así:

Pulse aquí para mandarme un correo electrónico, gracias por leer este manual

 

También si lo desea podrá poner una imagen o texto, encima de otro texto o de otra imagen, esta es la forma:

 

 

TENGAN PRESENTE QUE ESTAS SON DOS IMÁGENES GIF, UNIDAS POR UN LAYER.
El código para este caso, será:

<div id="Layer2" style="position:absolute; width:71px; height:58px; z-index:4; left: 398px; top: 929px">
< img src="
uruguay.gif" width="70" height="61">
</div>

<div id="Layer2" style="position:absolute; width:67px; height:59px; z-index:3; left: 354px; top: 899px">
< img src="escudo1.gif" width="70" height="61">
</div>

Layers Anidados
Estos nos permiten colocar un layer dentro de otro. Es decir, nos servirá en el momento que quieramos agrupar layers.
Acá les pongo un ejemplo de layer agrupados, se deberán colocar los textos o imágenes dentro de estos.

<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;">
Contenido situado en el interior del layer padre.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;">
Contenido situado en el interior del layer anidada.
</div>
</div>

Esto nos permitirá que ambos layers se desplacen juntos dentro de la pantalla.
Esto es todo y espero que les agrade el reporte.


Sin autorización, se prohíbe la reproducción parcial o total del manual.