Crear efecto para que al pasar el mouse sobre las imágenes adquieran color
Hola que tal oye una pregunta espero que me puedas ayudar....
como se hace ese efecto sobre las imagenes parece como si fueran capas o no se como llamarlo. Al pasar el mouse sobre ellas adquieren su color original porque antes estan opacas,,,,,
ahi es donde lo vi... http://www.love-intuition.com/mygael/main.htm
Zalu2
como se hace ese efecto sobre las imagenes parece como si fueran capas o no se como llamarlo. Al pasar el mouse sobre ellas adquieren su color original porque antes estan opacas,,,,,
ahi es donde lo vi... http://www.love-intuition.com/mygael/main.htm
Zalu2
1 respuesta
Respuesta de clonyx
1
Es Javascript-Dom con un poco de css
Este es el código que debes poner en tu página:(Lo dejé tal cual como estaba en la página)
---------------------
<script>
/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum ([email protected])
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate - time in milliseconds between trasparency changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change in transparency)
*/
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
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>
---------------------------
Luego a las imagenes las dejas así:
<img border="0" src="pageimages/fan-gael.gif" width="50" height="50" style="filter:alpha(opacity=30)" onmouseover="nereidFade(this,100,70,20)"
onmouseout="nereidFade(this,20,50,10)">
Este es el código que debes poner en tu página:(Lo dejé tal cual como estaba en la página)
---------------------
<script>
/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum ([email protected])
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate - time in milliseconds between trasparency changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change in transparency)
*/
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
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>
---------------------------
Luego a las imagenes las dejas así:
<img border="0" src="pageimages/fan-gael.gif" width="50" height="50" style="filter:alpha(opacity=30)" onmouseover="nereidFade(this,100,70,20)"
onmouseout="nereidFade(this,20,50,10)">
