Me lo contaron y lo olvidé, lo leí y lo entendí, lo hice y lo aprendí.





miércoles, 19 de diciembre de 2012

Botón para mostrar ayuda [HTML, CSS, JavaScript]

La idea es muy simple, se quiere dar al usuario la opción de ver, en una página web, la ayuda o información que tal vez quiera saber.
Aunque es seguido que se quiere "llenar" espacio en una página, hay ocasiones en las que no se cuenta con mucho espacio o no se quiere amontonar elementos en la interfaz.
Para ello está este sencillo método: un "botón" que al pasar el cursor por encima de éste se muestra un div con la información que se desea mostrar; al quitarse el cursor la información también se oculta.

Primero, tenemos el DIV en el cual se muestra la ayuda:


<div id="ayuda">
    <b>
        Instrucciones de uso:
        <br />
        .....
    </b>
</div>

Lo importante es el "id" del div.
Ahora, lo esencial es que inicialmente esté oculto y que, cuando se muestre, esté encima de todos los demás elementos de la página. En sí, sólo hace falta los siguientes 2 atributos CSS:


visibility: hidden;
z-index: 5000;

Más, para mi gusto, se vería bien que estuviera sombrado y con esquinas redondeadas. Ésto es opcional claramente, pero el CSS del div sería:


#ayuda{
        border: solid gray 1px;
        width: 250px;
        background-color: white;
        box-shadow: 6px 6px 5px #999;
        -webkit-box-shadow: 6px 6px 5px #999;
        -moz-box-shadow: 6px 6px 5px #999;
        visibility: hidden;
        z-index: 5000;
    }

Después el botón, que realmente no será un botón sino un enlace; pero antes, mencionaré las funciones en JavaScript para ocultar y mostrar el DIV de ayuda:


function mostrarAyuda()
{
document.getElementById('ayuda').style.visibility = "visible";
}
function ocultarAyuda()
{
document.getElementById('ayuda').style.visibility = "hidden";
}

La función "mostrarAyuda" le asigna el valor "visible" al atributo "visibility" al div de ayuda. Lo cual hace que se muestre.
La función "ocultarAyuda" le asigna el valor "hidden" (oculto) al atributo "visibility" al div de ayuda. Lo cual hace que se oculte.
Y bueno, el enlace (que servirá de botón) para mostrar y ocultar la ayuda al pasar el cursor por encima:

<a id="boton" href="#" onmouseover="javascript:mostrarAyuda()" onmouseout ="javascript:ocultarAyuda()">Ayuda</a>

Ahí, el evento onmouseover (cuando se le pasa el cursor por encima) manda a llamar la función "mostrarAyuda". Caso contrario con el evento "onmouseout" llama la función "ocultarAyuda".

Y finalmente, el estilo del enlace que hará de botón. Como es muy complejo el estilo CSS para darle un buen toque elegante, además de que cambie según el cursor se encuentre encima o no, sólo les pongo el código CSS:


#boton {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
        background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
        background-color:#ffffff;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#777777;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #ffffff;
    }
#boton:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
        background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
        background-color:#d1d1d1;
    }
#boton:active {
        position:relative;
        top:1px;
    }


El resultado se vería así:
http://unrinconenlaweb.webcindario.com/programas/boton_ayuda/pagina.html

Y pueden descargar los archivos, separado el CSS, JS y HTML para un manejo más sencillo :D

https://docs.google.com/open?id=0B6J7PWBjtBf7TUxzZEFkYVlvWjA