Tutoriales
Tutoriales ~ javascript ~ Transparencia de Imagenes| Transparencia de Imagenes | |
|
Fecha: 2008-12-07 Nivel: Facil Impresiones: 1 Autor: Shinji Categoria: javascript Descripcion: Dale transparencia a tus imagenes con un sencillo codigo.. |
Bookmark:
  E-mail to a friend View printable version Permanlink |
Muchas veces necesitamos un bonito efecto para nuestras imágenes, javascript es una solución eficiente para ello,
Con el siguiente codigo podremos mostrar la transparencia de imágenes con javascript y css.
Recuerda que se debe colocar entre el <head></head>, o si no crear crear un archivo.js
y utiliza el siguiente código:
<script type="text/javascript" src="archivo.js"></script>
Codigo:
<SCRIPT>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</SCRIPT>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</SCRIPT>
Ya que tenemos este código dentro del <head> tenemos que poner el siguiente código en cada imagen que queremos que tenga una transparencia.
onmouseover=nereidFade(this,65,30,5) style="FILTER: alpha(opacity=100)" onmouseout=nereidFade(this,100,15,5)
Por ejemplo.
<img onmouseover=nereidFade(this,65,30,5) style="FILTER: alpha(opacity=100)" onmouseout=nereidFade(this,100,15,5) src="index.png" alt="" / >
y este es mi resultado Click
Comentarios
No hay Comentarios.
Ads
Ultimos Tutoriales
Efecto de Luz en: photoshop el: 2008-12-08 por: Shinji
Triple Borde en: photoshop el: 2008-12-08 por: Shinji
Fondos con Pinceles en: photoshop el: 2008-12-08 por: Shinji
Glowing Skin en: photoshop el: 2008-12-08 por: Shinji
Negar Acceso a Archivos en: misc el: 2008-12-07 por: Shinji
Ultimos Layouts
