Galeria de Logos:como agrandar la imagen en mouse over

[javico40]

Hola amigos de foros del web, en internet vi una galeria de fotos en la cual cuando tienes mouse over sobre una foto esta se agranda y retoma su tamaño natural cuando se retira el mouse, ahora lapregunta, si lo que tengo es una tabla con un logo en cada celda como hago esto?,he aislado el codigo de la galeria, son javascripts los que hacen esto, pero no funciona,alguno sabe como hacerlo?

[David]

Para eso, debes tener una imagen pequeña y otra grande, luego en el evento onmouseover cambias el src a la imagen grande, cuando se produzca el evento onmouseout haz lo contrario.

[javico40]

He tratado de hacerlo pero ha sido bastante dificil, me podrias dar algun codigo de ejemplo, gracias pana por tu colaboracion.

[JavierB]

Hola javico40

Un pequeño ejemplo:

Código:

<img src="pequena.jpg" onmouseover = "this.src=grande.jpg" />

Añade el evento onmouseout para volver a la imagen original.

Saludos,

[javico40]

Quiero hacer algo como lo que hace : http://wingnut.freitagmorgen.de/, por eso es que no he podido hacerlo, me baje el codigo y todo pero es para galeria de fotos y yo tengo es una tabla con logos, por eso el problema, muchas gracias por responder Javier B y David el Grande.

[David]

¿Has probado con lo que te dijimos?. Solo necesitas tener la imagen pequeña y la imagen grande, y cambiar el src, es mucho más simple.

[buzu]

No me gusta el efecto. Un dato, no usan don imágenes, es una sola y al inicio la ponen mas pequeña de lo que es para poder agrandarla después sin tener que perder calidad o cargar una nueva imagen. Al menos yo así lo haría ya que es una forma sencilla de lograr el efecto. Se me ocurre como se puede hacer pero si ya lo tienes ahi para descargar de a gratis, para que querrías hacerlo tu mismo?

[javico40]

es que si entraron en la pagina se dan cuenta que no solo escambiar una imagen por otra, ella crea un efecto ademas, hace que parezca como si la imagen creciera, lei el codigo de Easygallery y utiliza thumbnails, pero no entiendo como hace el efecto de aumentar tamaño, David hice lo que me dijeron pero no hace el mismo efecto, Buzu el codigo esta para descargar pero es una mezcla de php y javascript,parece como si el javascript fuese modificado con php y no haber sido originalmente contruido con el, pero alguno sabe como lograr ese efecto?

[David]

No creo que así sea, sí o sí es directamente con Javascript. PHP es un lenguaje que se ejecuta en el servidor así que nada que ver tiene, a no ser para generar el código, pero el resultado siempre será en Javascript.

[javico40]

Si tienes razon me equivoque al escribir quise decir que saca por php de la base de datos las rutas a las fotos, aqui esta el codigo magico:

Código:

<script>
<!--
var zoom = 4;
var speed = 4;
var real = 0;
var intervalIn;
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++)
{
  if (divs[i].id == 'livethumbnail')
  {
	var myimg = divs[i].getElementsByTagName('img')[0];	
	myimg.smallSrc = myimg.getAttribute('src');
	myimg.smallWidth = parseInt(myimg.getAttribute('width'));
	myimg.smallHeight = parseInt(myimg.getAttribute('height'));
	divs[i].onmouseover = scaleIn;
	divs[i].onmouseout = scaleOut;
	if (!myimg.smallWidth)
    {
    <?php
    if (isset($image)){
	  if ($image[0] > $image[1])
	  {
        echo "myimg.smallWidth = $image[0];\n";
        echo "myimg.smallHeight = $image[1];\n";
      }
      else
	  {
        echo "myimg.smallWidth = $image[1];\n";
 	    echo "myimg.smallHeight = $image[0];\n";
      }
	}
    ?>
      real = 0;
    }
    else
    {
  	  real = 1;
    }
  }
}

function scaleIn()
{
  var myimg = this.getElementsByTagName('img')[0];
  this.style.zIndex = 20;
  myimg.src = myimg.smallSrc;
  var count = 0;
  var real = 0;
  intervalIn = window.setInterval(scaleStepIn, 1);
  return false;
  
  function scaleStepIn()
  {
	var widthIn = parseInt(myimg.style['width']);
	var heightIn = parseInt(myimg.style['height']);
	var topIn = parseInt(myimg.style['top']);
	var leftIn = parseInt(myimg.style['left']);
	if(widthIn >= heightIn) {
	  widthIn += speed;
	  heightIn += Math.floor(speed * (3/4));
	  topIn -= (Math.floor(speed * (3/8)));
	  leftIn -= (speed/2);
	}
	else
	{
	  widthIn += Math.floor(speed * (3/4));
	  heightIn += speed;
	  topIn -= (speed/2);
	  leftIn -= (Math.floor(speed * (3/8)));
	}
	myimg.style['width'] = widthIn;
	myimg.style['height'] = heightIn;
	myimg.style['top'] = topIn;
	myimg.style['left'] = leftIn;
	count++;
	if (count >= zoom)
	  window.clearInterval(intervalIn);
  }			
}
function scaleOut()
{
  window.clearInterval(intervalIn);
  var myimg = this.getElementsByTagName('img')[0];
  myimg.src = myimg.smallSrc;
  this.style.zIndex = 10;
  var mydiv = this;
  var interval = window.setInterval(scaleStepOut, 1);
  return false;

  function scaleStepOut()
  {
	var width = parseInt(myimg.style['width']);
	var height = parseInt(myimg.style['height']);
	var top = parseInt(myimg.style['top']);
	var left = parseInt(myimg.style['left']);
	if(width >= height) {
	  width -= speed;
	  height -= Math.floor(speed * (3/4));
  	  if(width < myimg.smallWidth + 4) {
	    myimg.style['width'] = myimg.smallWidth;
	    myimg.style['height'] = myimg.smallHeight;
	    myimg.style['top'] = 0;
	    myimg.style['left'] = 0;
		mydiv.style['zIndex'] = 1;
		window.clearInterval(interval);
	  }
	  else{
	    myimg.style['width'] = width;
	    myimg.style['height'] = height;
	    myimg.style['left'] = left + (speed/2);
	    myimg.style['top'] = top + (Math.floor(speed * (3/8)));
	  }
	}
	else
	{
	  width -= Math.floor(speed * (3/4));
	  height -= speed;
	  if(real==1)
	  {
	    if(width < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallWidth;
	      myimg.style['height'] = myimg.smallHeight;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  mydiv.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	  else
	  {
	  	if(height < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallHeight;
	      myimg.style['height'] = myimg.smallWidth;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  mydiv.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	}	  
  }
}
//-->
</script>

pero no logro saber como trabaja,o simplificar este proceso, alguna idea?

[buzu]

Ya se que el efecto usa php. Una de las cosas que hace el php es crear los tumbnails y no creo que haga ninguna conexión con una base de datos, pero de esto último no estoy seguro.

El efecto es simple, Como te dije, primero la imagen la pones mas pequeña de lo que es, luego cuando se hace el mouseover, cambias tanto el height como el width de la imagen progresivamente hasta que alcance su tamaño normal. Usarías ya sea un setInterval o un seTimeout. No lo veo tan complicado.

[javico40]

Si tienes razon lo hace progresivamente, ya entiendo como funciona y me pondre a programar la solucion que mas se adapte a loque quiero,muchas graciassss.

[buzu]

Bien... Si te atoras ya sabes que acá andamos....

[pacus]

Hola que tal, quiero hacer algo mas o menos parecido pero que al pasar el mouse sobre un enlace de texto muestre la imagen sin necesidad de hacer click, can ya help me?

[danielkvaldez]

hola ,mira yolo realice asi con un div class y dos imagenes una pequeña y otra grande a tamaño real te mando el codigo

<html>
<div class="miniatura"><a href="imagenes/porfolio/131.JPG" target="_new"><img src="imagenes/porfolio/miniatura/231.jpg" width="145" height="145"></a></div>
</html
y en css pones

.miniatura {
float: left;
height: 145px;
width: 145px;
border: 5px solid #9F3;
margin-right: 10px;
margin-bottom: 10px;
}
.miniatura:hover {
float: left;
height: 140px;
width: 140px;
border: 10px solid #FC0;
margin-right: 5px;
margin-bottom: 5px;
}

provalo y suerte. daniel