Manejo de Imágenes

ASPirin · #1 (**permalink**) 07/07/2005, 10:26

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 !

baccxus · #2 (**permalink**) 07/07/2005, 10:43

si se puede con javascript, una imagen de sustitución o sea que en realidad tendrías 2 imagenes.

ASPirin · #3 (**permalink**) 07/07/2005, 11:24

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 ?

JavierB · #4 (**permalink**) 07/07/2005, 11:32

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,

ASPirin · #5 (**permalink**) 08/07/2005, 09:29

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 !!!

JavierB · #6 (**permalink**) 08/07/2005, 09:39

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,

tunait · #7 (**permalink**) 08/07/2005, 10:10

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>

JavierB · #8 (**permalink**) 08/07/2005, 10:17

Esta tía con tal de no tener que mover el mensaje de foro no sabe que inventarse

tunait · #9 (**permalink**) 08/07/2005, 10:23

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...

)

ASPirin · #10 (**permalink**) 08/07/2005, 11:19

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 !!!!

tunait · #11 (**permalink**) 08/07/2005, 12:07

.....Óle

CORE · #12 (**permalink**) 08/07/2005, 13:54

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" />

baccxus · #13 (**permalink**) 08/07/2005, 14:25

Cita:

Iniciado por CORE

por que no debemos usar office2003

Qué? otra campaña!

RoQ · #14 (**permalink**) 08/07/2005, 14:41

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?

caricatos · #15 (**permalink**) 08/07/2005, 18:41

Hola:

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

Saludos

furoya · #16 (**permalink**) 10/07/2005, 07:56

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.

caricatos · #17 (**permalink**) 10/07/2005, 10:36

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

ASPirin · #18 (**permalink**) 11/07/2005, 09:32

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 !!!

Durgeoble · #19 (**permalink**) 11/07/2005, 12:51

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)

furoya · #20 (**permalink**) 18/07/2005, 09:05

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é.