| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5
Falso combo (IV)
por Luciano Moreno, del departamento de diseño web de
BJSParaRed.
Ajustando los colores.-
Si observamos un combo real, veremos que una vez abierta la cortina de las opciones, al pasar el cursor sobre una de estas el fondo y el texto de la misma cambia de color, para destacar así la opción que se activará si hacemos click. Es un evento del tipo mouseover-mouseout que debemos añadir a nuestro falso combo para que tenga la apariencia de uno real.
Para ello vamos a recurrir a asignar una clase a las celdas que contienen las opciones del combo, cambiándola a otra conveniente al pasar el cursor sobre ellas, y volviéndola a su clase original al quitarlo.
Vamos a hacerlo sólo para Internet Explorer y Netscape Navigator 6x. Para las versiones 4x también es posible hacerlo, pero genera más complicaciones de código que ventajas reales.
El código necesario será ahora (el nuevo, en azul):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style
type="text/css">
.comboCaja{background-color:#4c4c4c;layer-background-color:#4c4c4c;position:relative;width:100px;height:16px;clip:rect(0,100,16,0);z-index:1;}
.fondoCaja{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;}
.flechaCaja{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;}
.faldaCaja{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;}
.fondofaldaCaja{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_2.css'>");
}
else
{
document.write("<link
rel='stylesheet' type='text/css'
href='css/estilos_2.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)
}
function cambiavalor(caja,
cadena)
{
if(document.all)
{
eval("document.all('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
else
if(document.layers)
{
with
(document.seleccion1.document.layers['fondocaja1'])
{
document.open();
document.write("<span
class='lista'>"+cadena+"</span>");
document.close();
eval("cambia('falda"+caja+"')");
}
document.forms.miform.combo1.value=cadena;
}
else
if(document.getElementById)
{
eval("document.getElementById('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
}
function
colores(celda,a)
{
if(document.all)
{
if(a==0)
{
document.all[celda].style.background='#663399';
document.all[(celda+1)].className='linkOn';
}
else
if(a==1)
{
document.all[(celda+1)].className='linkOff';
document.all[celda].style.background='white';
}
}
else
if(document.getElementById)
{
if(a==0)
{
document.getElementById(celda).style.background='#663399';
eval("document.getElementById('link"+strN+"').className='linkOn'");
}
else
if(a==1)
{
document.getElementById(celda).style.background='white';
eval("document.getElementById('link"+strN+"').className='linkOff'");
}
}
}
</script>
</head>
<body bgcolor="#ffff99">
<form
name="miform" action="laquesea" method="post">
<input type="hidden"
name="combo1" value="seleccione">
<div id="seleccion1"
class="comboCaja">
<div id="fondocaja1"
class="fondoCaja"><span
class="lista">seleccione</span></div>
<div
class="flechaCaja"><a href="#" onclick="cambia('falda1')"><img
src="images/flecha.gif" width="15" height="14" border="0"
alt="flecha"></a></div>
<div id="falda1" class="faldaCaja">
<div id="fondofalda1"
class="fondofaldaCaja">
<table
cellpadding="0" cellspacing="0" border="0"
width="100%">
<tr>
<td
width="100%" onmouseover="colores(this.sourceIndex,0);"
onmouseout="colores(this.sourceIndex,1);"
onclick="cambiavalor('1','seleccione');return false;"><a href="#"
onclick="cambiavalor('1','seleccione');return false"
class="linkOff">seleccione</a></td>
</tr>
<tr>
<td
width="100%" onmouseover="colores(this.sourceIndex,0);"
onmouseout="colores(this.sourceIndex,1);" onclick="cambiavalor('1','uno');return
false;"><a href="#" onclick="cambiavalor('1','uno');return
false;"
class="linkOff">uno</a></td>
</tr>
<tr>
<td
width="100%" onmouseover="colores(this.sourceIndex,0);"
onmouseout="colores(this.sourceIndex,1);" onclick="cambiavalor('1','dos');return
false;"><a href="#" onclick="cambiavalor('1','dos');return false;"
class="linkOff">dos</a></td>
</tr>
<tr>
<td
width="100%" onmouseover="colores(this.sourceIndex,0);"
onmouseout="colores(this.sourceIndex,1);"
onclick="cambiavalor('1','tres');return false;"><a href="#"
onclick="cambiavalor('1','tres');return false"
class="linkOff">tres</a></td>
</tr>
</table>
</div>
</div>
</div>
<br><br><br><br>
<a
href="#" onclick="alert(document.forms.miform.combo1.value);return
false;">javascript:</a>
</form>
</body>
</html>
Mientras que las clases de estilos para los estados de las celdas las hemos puesto en los ficheros CSS externos, pero cuyo contenido básico es:
.lista{color:#000000;font-family:Helvetica;font-size:11px;padding-left:5px;padding-top:0px;text-decoration:none;}
.linkOff{color:#000000;font-family:Helvetica;font-size:11px;padding-left:5px;text-decoration:none;}
.linkOn{color:white;font-family:Helvetica;font-size:11px;padding-left:5px;text-decoration:none;}
Eu resultado final lo tenéis en esta ventana.
 |
 |
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5