Posted by admin in scriptsabr 21st, 2009 | no responses
Elem Fader es un script que amplía la funcionalidad para desvanecer cualquier tipo de elemento HTML. Dando un efecto bastante agradable al realizar los mouseover sobre cada uno de ellos. Es muy simple de aplicarlo a listas, botones de formularios, inclusive adaptarlo a nuestro Menú con Imágenes.
Ver demos – Descarga demo
Uso.
Lo primero será descargar el script (usar botón derecho y guardar “enlace como”). Lo alojaremos en nuestra carpeta o servidor. Posteriormente llamaremos a esa librería incluyendo el siguiente código entre las etiquetas < Head > …..< /Head > de nuestra Web.
JavaScript:
<script language=“JavaScript” src=“JSFX_ElemFader.js” type=“text/javascript”></script>
Ejecutaremos la acción mediante el evento “onload“.
HTML:
<body onload=”JSFX.fadeElemAuto()”>
Podemos observar que en la etiqueta < body > tenemos el evento onload=” JSFX.fadeElemAuto()” Es decir, que cuando se han terminado de cargar todos los elementos de la página se llamará a una función llamada “JSFX.fadeElemAuto()” que hemos definido en el script.
Aplicado a un menu con imagenes
Creamos nuestro menú como habitualmente lo hacemos con su correspondiente CSS.
CSS:
#menu { height:100px;}
#menu ul { list-style:none; margin:0; padding:0 10px;margin:0 0 0 100px; }
#menu li { float:left; }
#menu li a { display:block; height:40px; width:113px; background-position:center top; cursor:pointer }
#menu li#home a { background-image:url(home.gif); }
#menu li#about a{ background-image:url(about.gif); }
#menu li#links a { background-image:url(links.gif); }
Y en nuestra estructura, agregaremos una nueva clase denominada elemFader, la cual nos generara el efecto desvanecido al realizarse el Mouseover entre cada uno de los enlaces.
HTML:
<div id=”menu”>
<ul>
<li id=”home”><a class=”elemFader” href=”#”></a></li>
<li id=”about”><a class=”elemFader” href=”#”></a></li>
<li id=”links”><a class=”elemFader” href=”#”></a></li>
</ul>
</div>
Aplicado a los botones de nuestro formulario
También lo haremos utilizando la clase elemFader
Aplicado a enlaces con css
CSS:
.elemFaderCeleste
{
position:relative;filter:alpha(opacity=20); -moz-opacity:0.2;
display: block;
border-top : 1px solid #77CFFB;
border-left : 1px solid #77CFFB;
border-right : 1px solid #7BD0FB;
border-bottom : 1px solid #7BD0FB;
background-color:#7FD4FF;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
text-decoration:none;
color: #FFFFFF;
width:100%;
text-align:left;
}
La estructura, llamando en cada enlace a la clase “elemFaderCeleste”
HTML:
<div style=”width: 80px”>
<a class=”elemFaderCeleste” href=”#”>Home</a>
<a class=”elemFaderCeleste” href=”#”>Contacto</a>
<a class=”elemFaderCeleste” href=”#”>About</a>
</div>
Mas Info javascript-fx
HTML:
<form>
<input value=”Aceptar” class=”elemFader” type=”button”>
<input value=”cancelar” class=”elemFader” type=”button”>
<input value=”enviar” class=”elemFader” type=”button”>
<input value=”borrar” class=”elemFader” type=”button”>
</form>
Copy the code below to your web site.
Link to this page
