Foros del Web » Creando para Internet » CSS »

Manejo de Imágenes

Estas en el tema de Manejo de Imágenes en el foro de CSS en Foros del Web. Hola, mi consulta es la siguiente: Se puede aumentar el tamaño de imágenes, con solo acercar el mouse ( "hover" ) sobre una imagen pequeña ...
  #1 (permalink)  
Antiguo 07/07/2005, 11:26
 
Fecha de Ingreso: junio-2005
Mensajes: 93
Antigüedad: 12 años, 6 meses
Puntos: 0
Manejo de Imágenes

Hola, mi consulta es la siguiente:
Se puede aumentar el tamaño de imágenes, con solo acercar el mouse ( "hover" ) sobre una imagen pequeña ?
Muchas gracias !

  #2 (permalink)  
Antiguo 07/07/2005, 11:43
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
si se puede con javascript, una imagen de sustitución o sea que en realidad tendrías 2 imagenes.
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 07/07/2005, 12:24
 
Fecha de Ingreso: junio-2005
Mensajes: 93
Antigüedad: 12 años, 6 meses
Puntos: 0
Pregunta Esto así anda más o menos...

Con este código, se logra parcialmente el efecto, pero en un area diferente de pantalla...
( La idea sería abarcando la imagen fuente, para simular la ampliación...)



<input name="img1" type="image" src="MiniColinas.JPG" onMouseOver="img2.src='colinas azules.jpg'" onMouseOut="img2.src='blank.jpg'">
<input name="img2" type="image" src="blank.jpg">


Se podrá mejorar esto ?
  #4 (permalink)  
Antiguo 07/07/2005, 12:32
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola ASPirin

Prueba con esto:

<input name="img1" type="image" src="MiniColinas.JPG" onMouseOver="this.src='colinas azules.jpg'" onMouseOut="this.src='blank.jpg'">

Saludos,
  #5 (permalink)  
Antiguo 08/07/2005, 10:29
 
Fecha de Ingreso: junio-2005
Mensajes: 93
Antigüedad: 12 años, 6 meses
Puntos: 0
Hola JavierB:
Lo pruebo, pero o no muestra nada (blank.jpg) o lo muestra ampliado. Falta mostrar la miniatura (MiniColinas.JPG )

Algo se me está escapando...


Gracias nuevamente !!!
  #6 (permalink)  
Antiguo 08/07/2005, 10:39
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola de nuevo.

Me temo que me he perdido. Explicame un poco mejor esto:

Imágen inicial
Imágen cuando pones el ratón encima
Imágen cuando sacas el ratón

Saludos,
  #7 (permalink)  
Antiguo 08/07/2005, 11:10
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
y con css?

Código:
<style type="text/css">
a.imagen:link, a.imagen:visited{
	text-decoration: none;
	width: 78px;
	display: block;
	float: left;
}
a.imagen:hover{
	text-decoration: none;
	width: 178px;
	display: block;
	float: left;
}
</style>
</head>

<body>
<a href="#" class="imagen"><img src="imagen.jpg" width="100%" border="0"  /></a> 

</body>
</html>
  #8 (permalink)  
Antiguo 08/07/2005, 11:17
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Esta tía con tal de no tener que mover el mensaje de foro no sabe que inventarse
  #9 (permalink)  
Antiguo 08/07/2005, 11:23
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por JavierB
Esta tía con tal de no tener que mover el mensaje de foro no sabe que inventarse
lo agusto que me he reído con el comentario, gracias Javier

Igual y no es definitivo, si al final decide usar una solución js yá moveré el mensajillo (...y sí, soy vaga, lo llevo en los genes esos... )
  #10 (permalink)  
Antiguo 08/07/2005, 12:19
 
Fecha de Ingreso: junio-2005
Mensajes: 93
Antigüedad: 12 años, 6 meses
Puntos: 0
JavirB:
Hay una imagen pequeña.
Al acercar el ratón, la imagen se amplia.
Al quitar el ratón, la imagen se ve pequeña nuevamente.


Gracias por tu interés!

Gracias también tunait !
Tu propuesta funcionó OK !!!!
  #11 (permalink)  
Antiguo 08/07/2005, 13:07
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
.....Óle
  #12 (permalink)  
Antiguo 08/07/2005, 14:54
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Hola se ve muy bien pero al pasar el mouse se mueve hacia la derecha y abajo

entonces creo que se veria mejor que se expanda hacia todos los lados

yo lo corregiria asi

Código HTML:
<style type="text/css">
img	{
	width: 78px;
	height:78px;
	padding:10px;
	cursor:pointer;
	}
img:hover{
	width: 88px;
	height:88px;
	padding:5px;
	}
</style>
</head>

<body>
<img src="index.png"  border="0" /> 
  #13 (permalink)  
Antiguo 08/07/2005, 15:25
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Cita:
Iniciado por CORE
por que no debemos usar office2003
Qué? otra campaña!
__________________
Al final del día hablar es gratis, codificar no lo es
  #14 (permalink)  
Antiguo 08/07/2005, 15:41
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
Cita:
Iniciado por tunait
y con css?


Cita:
Iniciado por CORE
Hola se ve muy bien pero al pasar el mouse se mueve hacia la derecha y abajo

entonces creo que se veria mejor que se expanda hacia todos los lados

yo lo corregiria asi
muy buenos codigos los dos, pero bien sabemos que en IE eso no funka, asi ke ¿como seria el hack para que funcione?
  #15 (permalink)  
Antiguo 08/07/2005, 19:41
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

No solo llego tarde, sino que tengo una respuesta javascript:
onmouseover="this.width += 15" onmouseout="this.width -= 15"

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 10/07/2005, 08:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

Amo estos foros. Sé que ya lo había mencionado anteriormente, pero cuando veo mensajes que salen tan redondos lo tengo que repetir. Lo que más lamento es que justo éste arruine la armonía de conjunto...
En fin, me emociono cuando leo respuestas como -por ejemplo- la tuya, caricatos (), simple, eficiente y casi lapidaria.

Y no sigo para que nadie piense que me están pagando por decir todo ésto.

Lo que me quedó rebotando entre la oquedades de mi cerebro fueron el código y el comentario de tunait () y RoQ () respectivamente.
Sin ánimo de comenzar una polémica, estoy convencido de que el CSS no es un lenguaje por sí mismo. Será un gran auxiliar de diseño, pero siempre como complemento de -p.e.- el HTML ( que ,como su sigla lo indica, sí es un lenguaje ).

Hace un tiempo leí un mensaje que terminó de acomodar las fichas con respecto a mis dudas con el CSS y su avance sobre el HTML; y es que tendrá que seguir evolucionando hasta convertirse en algo como un 'CSSScript' para despegar y ser verdaderamente eficiente.

Pero no nos divaguemos. El hover para otros elementos además del anchor es algo que el Internet Explorer va a tener que adoptar si no quiere seguir perdiendo terreno. Pero mientras no lo haga ( y aún así, no "parchará" las versiones anteriores ) es totalmente cierto que cualquier código debe funcionar primero en IE ( versiones 5 a 7 inclusive ), y después en los demás navegadoes ( la prioridad la pone cada diseñador, mi humilde sugerencia es Firefox (Mozilla), Opera, Safari, Konqueror...).

Vamos por fin al asunto. Este código lo hice hace mucho, pero está en varias páginas y creo que también lo vi en este foro. Seguramente habrá que hacerle algunos ajustes para que trabaje en los últimos IE y los demás navegadores con cada DTD, o simplemente buscar uno que esté mejor hecho.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.alfa{position:relative; width:14px; height:16px; }

A:link.bravo , A:active.bravo , A:visited.bravo{position:absolute; border:none; background:white url("http://www.forosdelweb.com/images/icons/icon3.gif") no-repeat center ; text-decoration:none; padding:1px; width:14px; height:16px; }

A:hover.bravo{background: white url("http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif") no-repeat center; width:207px; height:108px}
</style>
</head>
<body>
<span class="alfa">
<a href="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" title="imagen" alt=imagen" class="bravo">&nbsp;</a></span>
Hecho con hover; imagen background.
<p>
El texto queda oculto al aumentar el tamaño de la imagen.</p>

</body>
</html>
El primer inconveniente es que hay que usar 2 imágenes. El segundo es la cantidad de ajustes 'precisos' que lleva el CSS. Al expandirse la imagen, cubre parte del documento; de otra forma nos desarmaría el diseño, claro.

saludos

furoya

p.d. : Hey!; tu código sí funciona en IE, tunait .Eso me pasa por escribir antes de mirar bien y probar. Por el comentario posterior quedé convencido de que aplicabas el hover a la imagen.

Debería borrar todo el mensaje, pero lo voy a dejar como recuerdo de mi oprobio.

Última edición por furoya; 10/07/2005 a las 09:20 Razón: por bruto
  #17 (permalink)  
Antiguo 10/07/2005, 11:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

Bueno, para intentar ayudar un poco más (espero que no sea para liar) otro par de comentarios:

El método de tunait (¡Hola !) me parece muy bueno (en un tema sobre postales usé el método de modificar la capa contenedora y la capa "contenido" ponerla con porcentajes, pero no con enlaces, sino con otra capa)... pero al usar enlaces supongo que se tendría que anular para que no refrescara la página un click (incluso accidental... al menos yo tengo el índice algo flojo)... y por tanto usar javascript y el maldito return false (bueno, el tema seguiría siendo css, ¡supongo!)

La idea de CORE sobre modificar el padding también me parece muy buena... Incluso se podrían usar bordes o márgenes... Usando un borde transparente se conseguiría también el efecto, pero si no me equivoco, hay exploradores que no se enteran (creo que explorer no lo reconoce) aunque en ambos casos (bueno, también mi caso) la calidad de la imagen empeoraría, pero de todos modos siempre se puede usar el viejo truco del rollover.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #18 (permalink)  
Antiguo 11/07/2005, 10:32
 
Fecha de Ingreso: junio-2005
Mensajes: 93
Antigüedad: 12 años, 6 meses
Puntos: 0
Java, allá vamos !!!

Estimado Caricato:
Gracias por tu interés y tu precisión...
Sumaré a mis consultas HTML, DHTML, CSS , ASP a JAVA!!!
Hasta la próxima !!!
  #19 (permalink)  
Antiguo 11/07/2005, 13:51
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
Cita:
Iniciado por furoya
Sin ánimo de comenzar una polémica, estoy convencido de que el CSS no es un lenguaje por sí mismo. Será un gran auxiliar de diseño, pero siempre como complemento de -p.e.- el HTML ( que ,como su sigla lo indica, sí es un lenguaje ).
Precisamente lo que pretende ser, ni mas ni menos, en cuanto a css script esperemos a css3 (yo por mi parte voy a proponer que vuelva la etiqueta menu aunque sea en css)
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #20 (permalink)  
Antiguo 18/07/2005, 10:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola de nuevo :

vuelvo sólo para agregar 2 datos más.

En IE6 ya no funciona lo de font-size:0, lo que nos deja sin varios lindos trucos.

Recordé un buen tema -sacando mi respuesta- donde también se menciona una forma de aumentar el tamaño de las imágenes. No es lo que se preguntó originalmente aquí, pero sí podría ser otra interpretación para quien use el buscador o se meta a curiosear en el tema.

Zoom en una imagen

.....

P.D. : ¡Pero en este tema no pego una!. Olvidé que habia sacado el font-size:0; de los enlaces. Era para que el tamaño de la fuente no deformara las imágenes de fondo. Bueno, el dato aquí está de más, pero va a servir en otro tema donde sí lo usé.

Última edición por furoya; 18/07/2005 a las 16:35
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 04:30.