| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5
Falso combo (II)
por Luciano Moreno, del departamento de diseño web de
BJSParaRed.
Animando el combo.-
Ya tenemos la base para nuestro falso combo. Pero los combos muestran sus opciones cuando se pulsa sobre la flecha lateral, y vuelven a ocultarlas si la volvemos a pinchar. Vamos pués a dar la animación adecuada a nuestro combo.
Para ello, ocultamos inicialmente la capa de las opciones, que hemos llamado falda, y creamos una función JavaScript que la vaya mostrando-ocultando de forma alternativa. Esta función la llameremos desde la imagen de la flecha, para lo cual situamos ésta dentro de un enlace HTML.
El código necesario es el siguiente (el nuevo, en azul):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style
type="text/css">
#seleccion1{background-color:#4c4c4c;layer-background-color:#4c4c4c;position:relative;width:100px;height:16px;clip:rect(0,100,16,0);z-index:1;}
#fondocaja1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:14px;clip:rect(0,98,14,0);position:absolute;left:1px;top:1px;z-index:5;}
#flecha1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:16px;height:14px;clip:rect(0,16,14,0);position:absolute;left:82px;top:1px;z-index:5;margin-left:1px;padding-left:1px;}
#falda1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:100px;height:70px;clip:rect(0,100,70,0);position:absolute;top:16px;left:0px;z-index:10;visibility:hidden;}
#fondofalda1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:69px;clip:rect(0,98,69,0);position:absolute;top:0px;left:1px;z-index:10;padding-top:4px;}
</style>
<script language="JavaScript"
type="text/javascript">
if(document.layers)
{
document.write("<link rel='stylesheet' type='text/css'
href='css/estilos_nc.css'>");
}
else
{
document.write("<link
rel='stylesheet' type='text/css'
href='css/estilos.css'>");
}
var
estado=false;
function
cambia(id)
{
if
(estado==false)
{
if (document.layers)
{
document.layers['seleccion1'].height="86";
document.layers['seleccion1'].clip.bottom="86";
document.seleccion1.document.layers[id].visibility =
"show";
}
else if (document.all)
document.all[id].style.visibility =
"visible";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"visible";
}
else
{
if
(document.layers)
{
document.layers['seleccion1'].height="16";
document.layers['seleccion1'].clip.bottom="16";
document.seleccion1.document.layers[id].visibility =
"hide";
}
else if (document.all)
document.all[id].style.visibility =
"hidden";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"hidden";
}
estado=(!estado)
}
</script>
</head>
<body bgcolor="#ffff99">
<div
id="seleccion1">
<div id="fondocaja1"><span
class="lista">seleccione</span></div>
<div id="flecha1"><a
href="#" onclick="cambia('falda1')"><img src="images/flecha.gif"
width= "15"
height="14" border="0" alt=
"flecha"> </a>
</div>
<div id="falda1">
<div
id="fondofalda1">
<table cellpadding="0"
cellspacing="0" border="0">
<tr>
<td
class="link">seleccione</td>
</tr>
<tr>
<td
class="link">uno</td>
</tr>
<tr>
<td
class="link">dos</td>
</tr>
<tr>
<td
class="link">tres</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Su resultado lo tenéis en esta ventana.
 |
 |
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5