Foros del Web » Programando para Internet » Jquery »

¿Se puede hacer esto con jQuery?

 Estas en el tema de ¿Se puede hacer esto con jQuery? en el foro de Jquery en Foros del Web. Soy novato en jQuery y lo que quiero hacer es un efecto con una imagen de fondo de un div y al hacer hover cambie ...
  #1 (permalink)  
Antiguo 15/01/2010, 17:52
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 15 años, 2 meses
Puntos: 0
¿Se puede hacer esto con jQuery?
Soy novato en jQuery y lo que quiero hacer es un efecto con una imagen de fondo de un div y al hacer hover cambie la imagen de fondo pero con un efecto de .show() o algo parecido y al quitar el raton de la imagen vuelva al estado original pero con el mismo desvanecimiento. He intentado hacerlo pero no lo he logrado.
Gracias de antemano,
Saludos!
  #2 (permalink)  
Antiguo 15/01/2010, 18:25
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 16 años, 4 meses
Puntos: 105
Respuesta: ¿Se puede hacer esto con jQuery?
<div style="background-image:url(imagen1.jpg)" onmouseover="$(this).fadeOut().css('backgroundImag e', 'imagen2.jpg').fadeIn();" onmouseout="$(this).fadeOut().css('backgroundImage ', 'imagen1.jpg').fadeIn();" />

lo he hecho aca rapido........
no lo he probado..... pero espero te sirva.

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 15/01/2010, 19:24
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto con jQuery?
Cita:
Iniciado por masterojitos Ver Mensaje
<div style="background-image:url(imagen1.jpg)" onmouseover="$(this).fadeOut().css('backgroundImag e', 'imagen2.jpg').fadeIn();" onmouseout="$(this).fadeOut().css('backgroundImage ', 'imagen1.jpg').fadeIn();" />

lo he hecho aca rapido........
no lo he probado..... pero espero te sirva.

Suerte.
Muchas gracias por tu respuesta, creo que no me hice entender bien, disculpame, lo que necesito es un efecto como este:
Código: 
http://labs.dragoninteractive.com/panel/demo/
pero que se active con hover como en el boton, creo que se utiliza algún sprite.
Gracias de antemano
  #4 (permalink)  
Antiguo 16/01/2010, 06:36
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 16 años, 4 meses
Puntos: 105
Respuesta: ¿Se puede hacer esto con jQuery?
hahaha...... ahora si nos entendemos..... y por que no mostraste el link desde un inicio.

el funcionamiento de eso, en si es tener un div con una imagen de fondo.
cuando haces el over, aparece con fade otro div encima del anterior con la imagen respectiva y obviamente en el out, se desvanece y otra vez se visualiza el anterior fondo.

aqui te paso una libreria creado en base a jquery para crear eso amigo.

fade.js
Código Javascript: 
Ver original
  1. // wrap as a jQuery plugin and pass jQuery in to our anoymous function
  2.     (function ($) {
  3.         $.fn.cross = function (options) {
  4.             return this.each(function (i) { 
  5.                 // cache the copy of jQuery(this) - the start image
  6.                 var $$ = $(this);
  7.                 
  8.                 // get the target from the backgroundImage + regexp
  9.                 var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
  10.  
  11.                 // nice long chain: wrap img element in span
  12.                 $$.wrap('<span style="position: relative; "></span>')
  13.                     // change selector to parent - i.e. newly created span
  14.                     .parent()
  15.                     // prepend a new image inside the span
  16.                     .prepend('<img border="0">')
  17.                     // change the selector to the newly created image
  18.                     .find(':first-child')
  19.                     // set the image to the target
  20.                     .attr('src', target);
  21.  
  22.                 // the CSS styling of the start image needs to be handled
  23.                 // differently for different browsers
  24.                 if ($.browser.msie || $.browser.mozilla) {
  25.                     $$.css({
  26.                         'border' : '0px', 
  27.                         'position' : 'absolute', 
  28.                         'left' : 0,
  29.                         'background' : '',
  30.                         'top' : this.offsetTop
  31.                     });
  32.                 } else if ($.browser.opera && $.browser.version < 9.5) {
  33.                     // Browser sniffing is bad - however opera < 9.5 has a render bug 
  34.                     // so this is required to get around it we can't apply the 'top' : 0 
  35.                     // separately because Mozilla strips the style set originally somehow...                    
  36.                     $$.css({
  37.                         'border' : '0px',
  38.                         'position' : 'absolute', 
  39.                         'left' : 0,
  40.                         'background' : '',
  41.                         'top' : "0"
  42.                     });
  43.                 } else { // Safari
  44.                     $$.css({
  45.                         'border' : '0px',
  46.                         'position' : 'absolute', 
  47.                         'left' : 0,
  48.                         'background' : ''
  49.                     });
  50.                 }
  51.  
  52.                 // similar effect as single image technique, except using .animate 
  53.                 // which will handle the fading up from the right opacity for us
  54.                 $$.hover(function () {
  55.                     $$.stop().animate({
  56.                         opacity: 0
  57.                     }, 200);
  58.                 }, function () {
  59.                     $$.stop().animate({
  60.                         opacity: 1
  61.                     }, 200);
  62.                 });
  63.             });
  64.         };
  65.         
  66.     })(jQuery);
  67.     
  68.     // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
  69.     // because .ready() fires before the images have loaded, but we need to fire *after* because
  70.     // our code relies on the dimensions of the images already in place.
  71.     $(window).bind('load', function () {
  72.         $('img.fade').cross();
  73.     });
  74.     
  75.     //-->

para utilizarla.... debes previamente referenciar el jquery, luego a esta libreria (dale click a ver original y copia todo en un archivo js).....
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fade.js"></script>

y para utilzar el efecto es asi de sencillo.
<img src="imagen1.jpg" class="fade" style="background: url(imagen2.jpg)" />

y listo.

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #5 (permalink)  
Antiguo 16/01/2010, 13:27
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto con jQuery?
Muchísimas gracias por tu ayuda me funcionó perfectamente.
Saludos!
  #6 (permalink)  
Antiguo 24/03/2010, 14:22
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 9 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto con jQuery?
Cita:
Iniciado por masterojitos Ver Mensaje
hahaha...... ahora si nos entendemos..... y por que no mostraste el link desde un inicio.

el funcionamiento de eso, en si es tener un div con una imagen de fondo.
cuando haces el over, aparece con fade otro div encima del anterior con la imagen respectiva y obviamente en el out, se desvanece y otra vez se visualiza el anterior fondo.

aqui te paso una libreria creado en base a jquery para crear eso amigo.

fade.js
Código Javascript: 
Ver original
  1. // wrap as a jQuery plugin and pass jQuery in to our anoymous function
  2.     (function ($) {
  3.         $.fn.cross = function (options) {
  4.             return this.each(function (i) { 
  5.                 // cache the copy of jQuery(this) - the start image
  6.                 var $$ = $(this);
  7.                 
  8.                 // get the target from the backgroundImage + regexp
  9.                 var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
  10.  
  11.                 // nice long chain: wrap img element in span
  12.                 $$.wrap('<span style="position: relative; "></span>')
  13.                     // change selector to parent - i.e. newly created span
  14.                     .parent()
  15.                     // prepend a new image inside the span
  16.                     .prepend('<img border="0">')
  17.                     // change the selector to the newly created image
  18.                     .find(':first-child')
  19.                     // set the image to the target
  20.                     .attr('src', target);
  21.  
  22.                 // the CSS styling of the start image needs to be handled
  23.                 // differently for different browsers
  24.                 if ($.browser.msie || $.browser.mozilla) {
  25.                     $$.css({
  26.                         'border' : '0px', 
  27.                         'position' : 'absolute', 
  28.                         'left' : 0,
  29.                         'background' : '',
  30.                         'top' : this.offsetTop
  31.                     });
  32.                 } else if ($.browser.opera && $.browser.version < 9.5) {
  33.                     // Browser sniffing is bad - however opera < 9.5 has a render bug 
  34.                     // so this is required to get around it we can't apply the 'top' : 0 
  35.                     // separately because Mozilla strips the style set originally somehow...                    
  36.                     $$.css({
  37.                         'border' : '0px',
  38.                         'position' : 'absolute', 
  39.                         'left' : 0,
  40.                         'background' : '',
  41.                         'top' : "0"
  42.                     });
  43.                 } else { // Safari
  44.                     $$.css({
  45.                         'border' : '0px',
  46.                         'position' : 'absolute', 
  47.                         'left' : 0,
  48.                         'background' : ''
  49.                     });
  50.                 }
  51.  
  52.                 // similar effect as single image technique, except using .animate 
  53.                 // which will handle the fading up from the right opacity for us
  54.                 $$.hover(function () {
  55.                     $$.stop().animate({
  56.                         opacity: 0
  57.                     }, 200);
  58.                 }, function () {
  59.                     $$.stop().animate({
  60.                         opacity: 1
  61.                     }, 200);
  62.                 });
  63.             });
  64.         };
  65.         
  66.     })(jQuery);
  67.     
  68.     // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
  69.     // because .ready() fires before the images have loaded, but we need to fire *after* because
  70.     // our code relies on the dimensions of the images already in place.
  71.     $(window).bind('load', function () {
  72.         $('img.fade').cross();
  73.     });
  74.     
  75.     //-->

para utilizarla.... debes previamente referenciar el jquery, luego a esta libreria (dale click a ver original y copia todo en un archivo js).....
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fade.js"></script>

y para utilzar el efecto es asi de sencillo.
<img src="imagen1.jpg" class="fade" style="background: url(imagen2.jpg)" />

y listo.

Suerte.
Hola masterojitos, como puedo hacer que un boton con las mismas caracteristicas que describiste, me abra una galeria emergente tipo shadowbox, ligthbox.
Porfa si me puedes ayudar soy novato en este tema.

saludos
  #7 (permalink)  
Antiguo 16/02/2011, 00:20
 
Fecha de Ingreso: febrero-2011
Mensajes: 6
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto con jQuery?
Hola masterojitos podrías hacerme el favor de explicar el proceso un poco mas detallado, ya que hace tan solo 2 semanas que he comenzado con el tema de las Webs llevo noches sin dormir y me paso todo el día estudiando, ya he estudiado HTML, CSS ahí voy junto con JS. Se que muchos pensaran que soy un tonto intentando saber algo muy difícil cuando hace tan solo dos semanas que estudio esto, pero la verdad es que me esfuerzo mucho y si no progreso no es por que sea tonto o no estudie, sino xq no tengo un buen maestro que me enseñe. Así que te pido eso amigo, explicalo un poco mas detallo y si me puedes aconsejar tutoriales o cosas que tu creas que me haría bien estudiarlas, dímelo. Gracias y espero que me respondan.
  #8 (permalink)  
Antiguo 16/02/2011, 07:41
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 11 meses
Puntos: 206
Respuesta: ¿Se puede hacer esto con jQuery?
Se puede hacer mucho más simple.
Tengo un DIV con la imagen de background-url, y dentro de ese DIV, un elemento IMG con el SRC a la otra imagen, por defecto con display none.
Entonces quedaría así:

Código HTML:
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	</head>
	<style>
		#perro { width:400px; height:300px; background:url(http://www.perros-enlinea.com/imagenes/perrito-empoyon.jpg) no-repeat; }
		#perro img { display:none;}
	</style>
	<script>
		$(function(){
			$("#perro").hover(
				function(){
					$("img",$(this)).stop(true,true).fadeIn("slow");
				},
				function(){
					$("img",$(this)).stop(true,true).fadeOut("slow");
				}
			);
		});
	</script>
	<body>

	<div id="perro">
		<img src="http://www.perros-enlinea.com/imagenes/perro-disfrazado-ligon.jpg"/>
	</div>
	</body>
</html>

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:36.