Foros del Web » Programando para Internet » Javascript »

Agrandar imágenes al pasar el Mouse

Estas en el tema de Agrandar imágenes al pasar el Mouse en el foro de Javascript en Foros del Web. Hola. Tengo un problema con la manera de agrandar imágenes al pasar el mouse, quiero que se logre el efecto de que crece lentamente, pero ...
  #1 (permalink)  
Antiguo 25/05/2011, 10:39
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años, 7 meses
Puntos: 1
Agrandar imágenes al pasar el Mouse

Hola.
Tengo un problema con la manera de agrandar imágenes al pasar el mouse, quiero que se logre el efecto de que crece lentamente, pero con el cambio de imagen que uso, se ve el cambio de la imagen de golpe.

Quiero saber como hacen esto:
http://casiopeastudio.com/servicios.php

Saludos Gracias por cualquier ayuida.
  #2 (permalink)  
Antiguo 25/05/2011, 10:48
Avatar de gysato  
Fecha de Ingreso: junio-2010
Ubicación: Tuxtla Gtz, Chiapas
Mensajes: 88
Antigüedad: 14 años, 5 meses
Puntos: 9
Respuesta: Agrandar imágenes al pasar el Mouse

hay de dos sopas para mi, o usas:

Código HTML:
<img id='imagen' src='imagen.jpg'  onmouseover='zoom()'/> 
Código:
function zoom(){
document.getElementById('imagen').style.height='80px';
}
o por jquery

Código HTML:
<img id='imagen' src='imagen.jpg'> 
Código:
$("#imagen").mouseover(function(){
$(this).css('height','80px');
});
Salu2
  #3 (permalink)  
Antiguo 25/05/2011, 10:58
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 13 años, 6 meses
Puntos: 32
Respuesta: Agrandar imágenes al pasar el Mouse

si ya as logrado que la imagen se agrande de golpe.....
entonces te queda el efecto...

solo en el momento que le dices que pase de 20px a 100px el alto es ese momento llamas a un bucle que valla contando 20+1 ......... 20+60, el resultado dar un crecimiento de uno en uno desde 20 a 100 y paras el bucle cuando a 100
  #4 (permalink)  
Antiguo 25/05/2011, 10:58
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Agrandar imágenes al pasar el Mouse

Hola gracias por la ayuda, pero a lo que veo esos códigos me hacen lo mismo (Crecer la imagen de Golpe).

¿otra idea?
  #5 (permalink)  
Antiguo 25/05/2011, 11:00
Avatar de gysato  
Fecha de Ingreso: junio-2010
Ubicación: Tuxtla Gtz, Chiapas
Mensajes: 88
Antigüedad: 14 años, 5 meses
Puntos: 9
Respuesta: Agrandar imágenes al pasar el Mouse

Cita:
Iniciado por Gabriel_azul Ver Mensaje
Hola gracias por la ayuda, pero a lo que veo esos códigos me hacen lo mismo (Crecer la imagen de Golpe).

¿otra idea?
Visita esta pagina ahi esta tu solución:

http://www.sohtanaka.com/web-design/...fect-w-jquery/

Salu2
  #6 (permalink)  
Antiguo 25/05/2011, 11:08
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Agrandar imágenes al pasar el Mouse

Gracias por la ayuda, checo la pagian y trato de hacer el bucle.

Cualquier cosa lo informo.
  #7 (permalink)  
Antiguo 25/05/2011, 13:21
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 15 años, 11 meses
Puntos: 17
Respuesta: Agrandar imágenes al pasar el Mouse

usa la funcion animate de jquery, es facil hacer eso

$(elemento).mouseover(function () {
$(this).css('height': '80px');
});

asi no lo hara de golpe,
  #8 (permalink)  
Antiguo 25/05/2011, 15:02
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Agrandar imágenes al pasar el Mouse

Gracias lo solucione con La función Animate =)
  #9 (permalink)  
Antiguo 07/12/2011, 09:56
 
Fecha de Ingreso: octubre-2011
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Agrandar imágenes al pasar el Mouse

Hola,

He ido al enlace que ha puesto gysato: http://www.sohtanaka.com/web-design/...fect-w-jquery/


he copiado el código para agrandar la imágenes y me he descargado el archivo .js y dentro del archivo hay entre otras esto:
"/*!
* jQuery JavaScript Library v1.7.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses."

Eso significa que puedo ponerlo en mi web? Hay algunas condiciones para ponerlo?
Yo he pensado dejar tal cual el archivo como está y dejar esto que pone del copyright pero creo que no hace falta repetirlo en el código fuente de mi web.
Decidme si debo de ponerlo tambien en mi código fuente.

Gracias

Etiquetas: rollover
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




La zona horaria es GMT -6. Ahora son las 08:46.