ampliación de imagenes progresivamente

Wel · #1 (**permalink**) 20/12/2004, 14:08

Hola a todos...SALUDOS!!
Estoy buscando un script para lo siguiente:

Dispongo de unas imagenes de tamaño 100x100 y en una web, pero las coloco reduciendolas con Width=50 Height=50... Bueno pues el script que ando buscando seria una función para que al poner el raton sobre una de estas imagenes (onmouseover) se amplie progresivamente hasta 100x100, y al retirarlo (onmouseout) se reduzca hasta 50x50

¿alguien sabe donde puedo encontrar algo parecido? ¿o como podria crearlo?

JavierB · #2 (**permalink**) 21/12/2004, 02:06

Hola Wel

A ver si te sirve esto:

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
zoom=100;
var tiempo;
function reduce() {
  obj=document.getElementById('im');
  if(zoom>50) zoom-=10;
	obj.style.width=zoom;
	obj.style.height=zoom;
	tiempo=setTimeout('reduce(im)',1000);
}
function amplia(im) {
  obj=document.getElementById('im');
	obj.style.width=100;
	obj.style.height=100;
	zoom=100;
	clearTimeout(tiempo)
}
</script>
</head>
<body>
<img id="im" src="/Web/imagen.gif" 
 onmouseover="reduce()" onmouseout="amplia()" />
</body>
</html>

Saludos,

Wel · #3 (**permalink**) 21/12/2004, 12:59

OK ... Muchas gracias es eso lo que queria... MUCHAS GRACIAS
JAVIERB

JavierB · #4 (**permalink**) 21/12/2004, 13:49

Ya me parecía a mí que iba a ser lo que querías

Me alegro de que te haya servido

Wel · #5 (**permalink**) 21/12/2004, 13:51

Una duda JavierB!! ????
Las dos funciones "amplia" y "reduce", si tengo más de una imagen, tengo que hacer amplia1 y reduce1, amplia2 y reduce2,... y cambiar en cada una el identificador de la imagen...¿Hay alguna manera de que yo les pase por parametro el identificador de la imagen que quiero ampliar o reducir?

<Img id=img1 src=imagen1.jpg onmouseover="amplia('img1')" onmouseout"reduce('img1');">
<Img id=img2 src=imagen2.jpg onmouseover="amplia('img2')" onmouseout"reduce('img2');">
...

JavierB · #6 (**permalink**) 22/12/2004, 02:02

Hola de nuevo.

Habría que hacer algunos cambios y dejar el código tal que así:

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
zoom=100;
var tiempo;
function reduce(obj) {
  if(zoom>50) zoom-=10;
	obj.style.width=zoom;
	obj.style.height=zoom;
	im=obj;
	tiempo=setTimeout('reduce(im)',1000);
}
function amplia(obj) {
	obj.style.width=100;
	obj.style.height=100;
	zoom=100;
	clearTimeout(tiempo)
}
</script>
</head>
<body>
<img src="/Web/imagen.gif" 
 onmouseover="reduce(this)" onmouseout="amplia(this)" />
</body>
</html>

Saludos,