Comunidad de diseño web y desarrollo en internet online

registrate

Registrarse + Grupos + Ayuda del foro

rollover

Foros de discusión > Javascript y jQuery

Citar

Escrito el 21 Ene 2008 05:21 am

Soy muy tonto, pero mucho.
Resulta que hoy he entrado aqui (blog muy recomendable) y me he quedado fascinado con ese efecto rollover que se desvanece lentamente... (Pulsad los botones y lo vereis)

¿Es simplemente un gif? ¿jQuery?
Si es solo un gif, ¿como me lo monto ahora que el CS3 no es tan colega con los gifs?

A ver si alguien sabe como hacer esta tontería.
Un saludo

en el foro que lo ha publicado no lo leera nadie y me causa una inminente curiosidad... la libreria parece ser jquery y la opcion supongo que fade... pero no estoy seguro

... arrancaros con un ejemplo y toda vuestra sabiduria, un salud y gracias..

http://www.cristalab.com/foros/t51328.html

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 22 Ene 2008 11:14 am

mmm...
no se...
pero no lo veo muy complicado...

con javascript, sería ago así...

<script>
function opac_off(e)
{OP=e.style.opacity;
_if(parseFloat(OP)>0.3)
______{OP-=0.1; window.setTimeout(opac_off(e),100)}
}
function opac_on(e)
{e.style.opacity=1;}
</script>
<body>
<img src="" onmouseover="javascript:opac_on(this);" onmouseout="javascript:opac_off(this);" />
</body>

Evidentemente, esto es solo un esquema.
Con un mínimo de trabajo, se convertiría en el efecto deseado.

PD: no hace falta jQuery, ni nada raro.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

Citar

Escrito el 22 Ene 2008 11:45 am

te agradezco la ayuda

, voy a intentar desarrollarlo

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 23 Ene 2008 06:13 am

Vaya, muchas gracias a los 2, de momento no he tenido tiempo de ponerme. Pero si no hace falta jQuery y se basa solo en JS lo veo mas fácil.
Salu2!

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

firefox

Citar

Escrito el 23 Ene 2008 01:45 pm

yo aun no lo consegui xDDDD, asique si lo consigues di como

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 23 Ene 2008 02:33 pm

Sois más vagos...
Mira que estaba casi todo hecho.
:latigo:

:latigo:

Código :

<script>
function opac_off(e)
{if(e.filters)
   {OP=parseFloat(e.filters.alpha.opacity);
    if(OP>40)
      {e.filters.alpha.opacity=OP-10;
       window.setTimeout("opac_off(document.getElementById('"+e.id+"'));",100)
      }
   }
     else
   {OP=parseFloat(e.style.opacity);
    if(OP>.4)
      {e.style.opacity=OP-0.1;
       window.setTimeout("opac_off(document.getElementById('"+e.id+"'));",100)
      }
   }
}
function opac_on(e)
{if(e.filters)
   {e.filters.alpha.opacity=100;}
     else
   {e.style.opacity=1.0;}
}
</script>
<style>
.uu   {filter:alpha(opacity=50);
    opacity:0.5;
   }
</style>
<body>
<img id="btn1" class="uu" src="http://www.cristalab.com/images/browsers/firefox.png" onmouseover="javascript:opac_on(this);" onmouseout="javascript:opac_off(this);" />
<img id="btn2" class="uu" src="http://www.cristalab.com/images/browsers/firefox.png" onmouseover="javascript:opac_on(this);" onmouseout="javascript:opac_off(this);" />
</body>

Os dejo a vosotros hacerlo algo más "crossbrowser" y "compatible", aunque así ya funciona.

>> Espero recibir un porcentaje por ello de vuestras webs.
:cool:

:cool:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

Citar

Escrito el 24 Ene 2008 01:01 am

rizome, descuida que si algun dia lo uso tu estaras en los creditos como hijo predilecto..., pero ahora voy a analizarlo y te pregunto cualquier duda... por cierto muchisimas gracias... no se si muchos te lo han reconocido pero desde que estoy en el foro te he visto con mucho movimiento Riendo... pues eso thanks

por cierto no le veo incompatibilidades xDDDDDDDDD

Código :

Código :

$(document).ready(function(){ // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").fadeTo("slow", 0.6);

$(".thumbs img").hover(function(){
$(".thumbs img").fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
},function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity back to 60% on mouseout
});
});

este codigo no es mio pero funcionaria? es jquery

esque no se como aplicar jquery me tengo que poner con ello

no quiero ser demasiado pesado, pero si me explicas como aplicar el de abajo podria parender un segundo metodo de usar jquery y te lo agradeceria enormemente... en cuanto al tuyo esta genail

---------------

segun lo que entiendo del script que yo puse...

todas las img con la clase thumbs img sufriran el cambio no?...

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 08:27 am

Joder rizome que amo, yo como hasta el viernes no empiezo con este proyecto no sé como me irá, si de todas formas dices que funciona te creo.

Muchisimas gracias

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

firefox

Citar

Escrito el 24 Ene 2008 08:32 am

En principio... leyendolo... parece correcto.
Lo que pasa, es que es jQuery.
(Aunque he leído, que Mootools es mucho más rápido que jQuery en casi todos los navegadores; y además, su página, en cuanto a "ejemplos", está mucho mejor montada, y permite además, descargar sólo la parte que te interesa.)

Como iba diciendo, "eso" es jQuery. Y usar "eso", supone tener que "embeber" una cantidad de código "x", desconocido. Confiando en su funcionalidad. Y personalmente, no me gusta usar código que no conozco desde el principio a final, a menos que lo tenga controlado.

En principio, sólo elijo soluciones así cuando voy a tener que usar muchas de sus soluciones, pero usar una librería taaaaaan grande... sólo para un pequeño ":hover"... no es lo mío.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

Citar

Escrito el 24 Ene 2008 02:11 pm

, no solo usaria para el hover... en diferentes aspectos como la precarga y tal tambien lo usare... el hecho es que no se como usarlo, me lei el manul que ofrece cristalab acerca de jquery... osea aunque no lo use en la vida (quiero saber como se usa

) no se que atributos u opciones deberia tener la img para que ese codigo lo identifique y ejecute la animacion

osea mi problema real es que pese a despues de leerme el ejemplo entender el codigo aun no se como aplicarlo

, te vas a ganar el cielo conmigo

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 02:51 pm

perdon no vi el boton de editar... bueno haciendo un analisis exaustivo tengo que reconocer que no entiendo el efecto xDDDDDDDDDDDDDD

http://rudeworks.com/

si la mirais en cualquier navegador que no sea firefox no se hace el efecto

...

por otro lado: en realidad no es un juego de opacidad, o no se como lo hace porque se supone que...

tiene una imagen de fondo que contiene los dos estados el hover y el normal... para hacer el el cambio de imagen directamente en css... pero en ningun momento se pierde la imagen... esto lo comento porque el estado normal deberia ser

imagen sin nada

paso por encima el raton (aqui directamente se pondria la otra imagen ocupando ese espacio)

pero no es asi porque se supone que la segunda imagen hace esa transicion de color... entonces es algo estupido ><...

no me entero ni yo xDDDD... y despues de esto ahora si tengo un problema que he de resolver

... luego lo cuento en otro topic porque no tiene nada que ver...

si me lo podeis explicar se agradeceria

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 03:53 pm

Theos esto se puede hacer de forma chapucera con un .gif
Cambiando en el hover.
Pero con la entrada del CS3 y lo jodido que es hacer gifs ahi...pues asi esta.
Mañana pruebo lo de rizome a ver que tal.

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

firefox

Citar

Escrito el 24 Ene 2008 04:07 pm

lo de rizome funciona... pero no funciona exactamente como lo del blog... rizome tiene una imgen con opacidad 50% y esta al pasar por encima pasa a 100... pero en el blog lo que hace es que tiene una imagen bas y parece ser otra la que cuando pasas por encima sube a 100 de opacidad.

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 04:13 pm

Y le añadimos...

Código :

$(document).ready(
   function()
   {
      $('.animate_back').mouseover( function() 
      { 
         $(this).animate(
            {
               opacity: 0
            },
            'fast'
         );
      } 
      );
      
      $('.animate_back').mouseout( function() 
      { 
         $(this).animate(
            {
               opacity: 1
            },
            'normal'
         );
      } 
      );   
   }
);

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

firefox

Citar

Escrito el 24 Ene 2008 04:28 pm

que es eso jamal? eso parece sacado de una libreria por los $... pero ahora hay que buscar que libreria y como hacerlo funcionar con nuestras clases... por la estructura es jquery... pero yo no estoy docto en eso... y no se aplicarlselo a las img

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 08:14 pm

Theos escribió:

lo de rizome funciona... pero no funciona exactamente como lo del blog... rizome tiene una imgen con opacidad 50% y esta al pasar por encima pasa a 100... pero en el blog lo que hace es que tiene una imagen bas y parece ser otra la que cuando pasas por encima sube a 100 de opacidad.

rizome escribió:

Sois más vagos...
Mira que estaba casi todo hecho.
:latigo:

:latigo:

Bueno...
Yo lo hice tal y como digiste.
Ahora... viendo ... es verdad que subyace una imagen gris, y aparece una naranjita.
No hay ayor problema con el código q he puesto.
Sería tan fácil como esto otro:

<script>
function opac_off(e)
{if(e.filters)
{OP=parseFloat(e.filters.alpha.opacity);
if(OP>00)
{e.filters.alpha.opacity=OP-10;
window.setTimeout("opac_off(document.getElementById('"+e.id+"'));",70)
}
}
else
{OP=parseFloat(e.style.opacity);
if(OP>0.0)
{e.style.opacity=OP-0.1;
window.setTimeout("opac_off(document.getElementById('"+e.id+"'));",70)
}
}
}
function opac_on(e)
{if(e.filters)
{OP=parseFloat(e.filters.alpha.opacity);
if(OP<100)
{e.filters.alpha.opacity=OP+10;
window.setTimeout("opac_on(document.getElementById('"+e.id+"'));",20)
}
}
else
{OP=parseFloat(e.style.opacity);
if(OP<1)
{e.style.opacity=OP+0.1;
window.setTimeout("opac_on(document.getElementById('"+e.id+"'));",20)
}
}
}
</script>
<body>
<div style="background-image:url('http://img340.imageshack.us/img340/7692/logo2sy0.png'); width:143px; height:142px;">
<img id="btn1" style="filter:alpha(opacity=00); opacity:0.0; width:143px; height:142px;" src="http://img218.imageshack.us/img218/9145/logoac0.png" onmouseover="javascript:opac_on(this);" onmouseout="javascript:opac_off(this);" />
</div>
</body>

¿más?

:cool:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

Citar

Escrito el 24 Ene 2008 09:46 pm

seeee despues de dartelas de guay xDDDDDDD, naaa eres genial!.... como se aplicaria en este caso mootools o jquery... lo digo porque quiero conocer esas librerias en este efecto y comprbar la velocidad de carga de los tres ejemplos...

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Citar

Escrito el 24 Ene 2008 11:42 pm

Creo que la solucion más facil para el asunto es ver el método fx fadeTo de jQuery:

Código :

$(document).ready( function(){
   $(".imagen").mouseover( function(){
      $(this).fadeTo("slow",100);
   });
   $(".imagen").mouseout( function(){
      $(this).fadeTo("slow",50);
   });
};

Sencillo, legible, jQuery. Te sugiero ver el tutorial de jQuery, es un muy buen framework pensado para ahorrar tiempo y trabajo.

Saludos.

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

firefox

Citar

Escrito el 24 Ene 2008 11:51 pm

rizome escribió:

En principio... leyendolo... parece correcto.
Lo que pasa, es que es jQuery.
(Aunque he leído, que Mootools es mucho más rápido que jQuery en casi todos los navegadores; y además, su página, en cuanto a "ejemplos", está mucho mejor montada, y permite además, descargar sólo la parte que te interesa.)

Como iba diciendo, "eso" es jQuery. Y usar "eso", supone tener que "embeber" una cantidad de código "x", desconocido. Confiando en su funcionalidad. Y personalmente, no me gusta usar código que no conozco desde el principio a final, a menos que lo tenga controlado.

En principio, sólo elijo soluciones así cuando voy a tener que usar muchas de sus soluciones, pero usar una librería taaaaaan grande... sólo para un pequeño ":hover"... no es lo mío.

Con respecto a ese punto de vista... humm. JQuery es una magnifica librería, muy completa, y sencilla de usar. Las funcionalidades que trae son basicamente lo que necesitas (casi todo) para lograr realizar paginas muy completas.

Estoy de acuerdo en que el peso es un factor escencial, pero jQuery minimizado y en gzip pesa 15 miserables kb, un tamaño muy pequeño para, reitero, todo lo que ofrece. El punto no es que tenga un "código x". El punto es que es un código optimizado para varios escenarios, compacto y facil de usar. Es opcion de cada cual sacarle el jugo a la libreria.

Tambien estoy de acuerdo en que para ciertos escenarios no es necesario añadir una libreria completa a la web. Sin embargo, cada libreria se escoje respecto al proyecto o la necesidad. Adjuntando jQuery tienes una solcuion efectiva, en muchos aspectos de tu web. Es cuestion de lo que se va a hacer si se usa jQuery, Mootools, ExtJs o incluso prototype.

Un saludo.

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

firefox

Citar

Escrito el 24 Ene 2008 11:55 pm

ok, lo estoy probando en cuanto obtenga un resultado o una duda te lo posteo supongo que en la img se puede poner la function(this) y asi tomaria directamente la identidad de la imagenno?, ahora mismo leo el tuto, gracias y felicidades por el tutlo lo ley hace no mucho de forma rapida y se que es tuyo

Por Theos

70 de clabLevel

Envíale un mensaje privado

firefox

Foros de discusión > Javascript y jQuery

Página 1 de 1

Este tema está cerrado y no puedes editar mensajes o responder

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.