Ejemplos y trucos utiles con CSS's

Ejemplos y trucos útiles con CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Botones
Äreas de trabajo
Variaciones en los textos
Menús de navegación

Barras de Herramientas

Con lo ya visto hasta ahora podemos imaginar muchas posibilidades para implementar barras de herramientas, sea con contenedores con sólo texto, utilizando pequeños iconos representativos de la acción a ejecutar (como en el ejemplo que se muestra a continuación) o de forma mixta, asociando al icono una pequeña etiqueta auxiliar (mejor hipertexto).

5.1 Barra de Iconos con Rollover: Utilizando una sencilla función Javascript para cambiar la clase de estilo de cada contenedor de icono con los eventos onMouseOver / onMouseOut, el efecto que se consigue es sumamente atractivo:

En primer lugar definimos la clase de estilo para implementar la Barra de Herramientas:

.ejContTools {background: #6BA6A4;line-height: 22px;padding: 1px;border: 1px solid #000000;}

A continuación definimos las 2 clases de estilo para ambos estados de los botones:

.pagesContIco {background: #50757E;padding-top: 1px;padding-bottom: 1px;padding-left: 5px;padding-right: 3px;text-align: center;border: 2px outset #D3E0DD;line-height: 18px;}
.pagesOnContIco {background-image:url(../images/bgOnContIco.gif);background-repeat:no-repeat;color:#F8DA85;cursor: hand;font-weight:normal; font-size:10px;text-align: center;vertical-align: middle;font-family:verdana, arial, helvetica,sans-seriff;}

La función Javascript para cambiar la clase de estilo de cada contenedor de icono con los eventos onMouseOver, onMouseOut, es la siguiente:

function changeIcons(id,classe,m)
{
if (m==0)
{
document.getElementById(id).className='pagesContIco';
}
else
{
document.getElementById(id).className=classe;
}

Y finalmente el código HTML que maqueta los botones con su efecto en celdas de la tabla contenedora es el siguiente:

5.3 Barra de Iconos con Opciones Subordinadas: Puede darse el caso que agrupemos las herramientas que se ponen a disposicón del usuario por tipo, de manera que un icono representara un grupo de opciones o heramientas específicas.

Evolucionando el caso anterior, podemos pensar en una Barra de Herramientas en la que el rollover sobre cada icono representativo de un grupo de herrramientas mostrara las opciones disponibles para dicho grupo.

De nuevo utilizaremos propiedades de las CSS's para resolver esta funcionalidad:

visibility: visible / hidden

Junto a a una sencilla función Javascript que muestre u oculte cada grupo de opciones de 2º nivel según proceda.Veamos el ejemplo:

Opción-11 Opción-12 Opción-13 Opción-14

Opción-21 Opción-22

Opción-31 Opción-32 Opción-33 Opción-34

Opción-41 Opción-42

Opción-51 Opción-52 Opción-53

Lo primero es tener la clase de estilo para implementar la Barra de Herramientas (en este caso utilizamos una larga para preveer crecimientos futuros):

.ejCont2Tools {background: #C6241C;line-height: 22px;padding: 1px;border: 2px groove #F3D4D3;}

A continuación definimos las 2 clases de estilo para ambos estados de los botones:

.ejOff2Ico {background: #FD0D00;padding-top: 1px;padding-bottom: 1px;padding-left: 5px;padding-right: 3px;text-align: center;border: 2px outset #F8CCC9;line-height: 18px;}
.ejOn2Ico {background: #D40C00;padding-top: 1px;padding-bottom: 1px;padding-left: 5px;padding-right: 3px;text-align: center;border: 2px inset #F8CCC9;line-height: 18px;}

La función Javascript para cambiar la clase de estilo de cada contenedor de icono con los eventos onMouseOver, onMouseOut, es igual a la del caso anterior:

function change2Icons(id,classe,m)
{
if (m==0)
{
document.getElementById(id).className='ejOff2Ico';
}
else
{
document.getElementById(id).className=classe;
}

Ahora utilizaremos otra función Javascript para mostrar u ocultar las capas de opciones de 2º nivel de cada icono con el evento onMouseOver: Esta función mostrará la opción de 2º nivel correspondiente a la vez que oculta el resto:

Ahora definimos la clase de estilo de los botones de las opciones de 2º nivel:

.sub2Cont {background: #E5E0E0;color: #D40C00;padding: 1px 5px;text-align: center;border: 1px outset #C6241C;font-size: 10px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}

A continuación definimos las clases de estilo de cada una de las capas que contienen de los botones de 2º nivel. Podría ser una única clase para todos los grupos, pero utilizamos una por opción de 1º nivel para incluir posicionamiento de las sub-opciones:

.subOptContainer1 {position: relative;top: -5px; left: 5px;visibility: hidden;}
.subOptContainer2 {position: relative;top: -27px; left: 30px;visibility: hidden;}
.subOptContainer3 {position: relative;top: -49px; left: 60px;visibility: hidden;}
.subOptContainer4 {position: relative;top: -71px; left: 85px;visibility: hidden;}
.subOptContainer5 {position: relative;top: -93px; left: 110px;visibility: hidden;}

Y finalmente el código HTML que maqueta los botones con su efecto en celdas de la tabla contenedora es el siguiente:

Y la definición HTML de las capas que contienen las opciones de 2º nivel es::

<div class="subOptContainer5" id="Layer5">
<span class="sub2Cont" onClick="javascript:void(null)"> Opción-51</span>
<span class="sub2Cont" onClick="javascript:void(null)"> Opción-52</span>
<span class="sub2Cont" onClick="javascript:void(null)"> Opción-53</span>
</div>

5.3 Barra de Iconos con Rollover y Opción Seleccionada: Ahora vamos a cambiar el enfoque completamente a fín de mostrar como utilizar para cada icono 3 imágenes diferentes alternadas mediante los eventos onMouseOver / onMouseOut / onClick:

Para ello situamos situamos los iconos de estado "reposo" (onMouseOut) en las celdas de una tabla, ambas con sus orrespondientes clases de estilo.

Sin embargo, ahora no vamos a modificar dichas clases mediante manejadores de eventos de Javascript. Ahora vamos a hacer "swaping" de las imágenes en sí mismas asociadas a cada icono. Esto implicará asociar los "event-handlers" a las imágenes en sí mismas, y no a las celdas:

Primero tendremos las clases de estilo para implementar la Barra de Herramientas y las correspondientes celdas:

.ejContTools {background: #6BA6A4;line-height: 22px;padding: 1px;border: 1px solid #000000;}
.ejCellTools {background: #D4D0C8;padding: 4px;border: 4px outset #ECE8E0;}

A continuación ubicamos cada imágen en su celda asociándolas los correspondientes eventos onMouseOver / onMouseOut / onClick

<table cellspacing="4" cellpadding="2" border="0">
<tr>
<td valign="top" class="ejCellTools">
<a href="javascript:void(null)" onMouseOver="imgSwitch(531,'IcoImg1',1)" onMouseOut="imgSwitch(531,'IcoImg1',0)" onClick="imgSwitch(531,'IcoImg1',2)"> <img id="531" name="IcoImg1" src="images/IcoImg1.gif" width="32" height="32" border="0" alt="Guardar"></a></td>
...

La función Javascript imgSwitch para cambiar las imágenes en función de los eventos onMouseOver, onMouseOut, onClick, es la siguiente:

5.4 Barra de Iconos con Rollover e Icono y Celda Seleccionados: Y, a riesgo de resultar excesivos y generar un artefacto con demasiados cambios y movimientos, podríamos combinar el "swaping" de imágenes anterior con el efecto de cambio de clases de las celdas contenedoras con los mismos eventos, como vimos en 5.1 Barra de Iconos con Rollover:

Ahora, definimos las clases de estilo para implementar la Barra de Herramientas y las correspondientes celdas en sus tres estados, onMouseOver / onMouseOut / onMouseClick:

.ejContTools {background: #6BA6A4;line-height: 22px;padding: 1px;border: 1px solid #000000;}
.ejCellTools {background: #D4D0C8;padding: 4px;border: 4px outset #ECE8E0;}
.ejCellOverTools {background: #ECE8DF;padding: 4px;border: 4px inset #ECE8E0;}
.ejCellOnTools {background: #FFFFFF;padding: 4px;border: 4px inset #ECE8E0;}

Ahora, las celdas de la tabla tendrán asociándas los correspondientes eventos onMouseOver / onMouseOut / onMouseClick. De igual forma, sucederá con las correspondientes imágenes dentro de las celdas:

<td valign="top" class="ejCellTools" id="5311" onMouseOver="buttonImg(5311,'ejCellOverTools',1)" onMouseOut="buttonImg(5311,'ejCellTools',0)" onClick="buttonImg(5311,'ejCellOnTools',2)">
<a href="javascript:void(null)" onMouseOver="imgSwitch(5311,'IcoImg11',1)" onMouseOut="imgSwitch(5311,'IcoImg11',0)" onClick="imgSwitch(5311,'IcoImg11',2)">
<img id="5311" name="IcoImg11" src="images/IcoImg11.gif" width="32" height="32" border="0" alt="Guardar"></a></td> ...

La función Javascript buttonImg para cambiar el estilo de las celdas en función de los eventos onMouseOver, onMouseOut, onClick, es la siguiente:

Y, como antes, la función Javascript imgSwitch para cambiar las imágenes en función de los eventos onMouseOver, onMouseOut, onClick, es la siguiente:

Capítulos:
Botones Äreas de trabajo Textos Menús Barras de Herramientas Posicionamiento de objetos Ocultar objetos

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's