Hola
Deiv, gracias por los alagos :D
La verdad, no entiendo bien tu duda. ¿Dices que si metes la imagen dentro de un TABLE la tabla misma se te deforma al hacer el efecto? ¿Que empuja al resto del contenido para que crezca la imagen? ¿Cómo es ésto posible si el espacio para que crezca está reservado por la propiedad margin?
Te pongo este ejemplo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
td {
width: 25px;
font-size: 0.5em;
}
</style>
</head>
<body>
<TABLE border="1" style="border-collapse: collapse; ">
<TR>
<TD><p>Mauris vestibulum tempus felis. Nulla ipsum lorem, auctor nec, pretium quis, auctor eget, tortor.</p></TD>
<TD><p>iaculis feugiat. Integer metus enim, laoreet id, feugiat at, blandit sit amet, massa.</p></TD>
</TR>
<TR>
<TD><img id="carita" src="http://www.forosdelweb.com/images/icons/icon10.gif" style="width: 16px; height: 16px; margin-top:50px; margin-left: 50px;" onmouseover="aumentar()" onmouseout="reducir()" /></TD>
<TD><p>Cras at nibh nec purus lobortis tincidunt. In pretium. Vestibulum blandit sagittis leo. Aenean ut nisi. Pellentesque non nisl. Phasellus vel massa. Nam ut risus..</p></TD>
</TR>
<TR>
<TD><p>Condimentum id, consequat bibendum, tortor. Donec eros felis, aliquam eu, mattis non, cursus vel, justo.</p></TD>
<TD><p>egestas velit at nisi. Integer laoreet fermentum erat. Aliquam mollis orci porttitor felis fringilla condimentum.</p></TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
var aumentando, reduciendo; // los procesos
function aumentar() {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Parámetros principales
var imagen = $("carita");
var hastaCuanto = 50;
// Proceso aumentativo
aumentando = setInterval( function() {
var anchuraActual = parseInt( imagen.style.width );
var alturaActual = parseInt( imagen.style.height );
if( anchuraActual<hastaCuanto && alturaActual<hastaCuanto ) { // Si podemos aumentar todavía, aumentamos
//dimensiones
imagen.style.width = (anchuraActual+1) +"px";
imagen.style.height = (alturaActual+1) +"px";
//margen
imagen.style.marginLeft = (parseInt(imagen.style.marginLeft)-1) +"px";
imagen.style.marginTop = (parseInt(imagen.style.marginTop)-1) +"px";
}
else // Si no, paramos
clearInterval(aumentando);
}, 10);
}
function reducir() {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Parámetros principales
var imagen = $("carita");
var hastaCuanto = 16;
// Proceso reductivo
reduciendo = setInterval( function() {
var anchuraActual = parseInt( imagen.style.width );
var alturaActual = parseInt( imagen.style.height );
if( anchuraActual>hastaCuanto && alturaActual>hastaCuanto ) {
//dimensiones
imagen.style.width = (anchuraActual-1) +"px";
imagen.style.height = (alturaActual-1) +"px";
//margen
imagen.style.marginLeft = (parseInt(imagen.style.marginLeft)+1) +"px";
imagen.style.marginTop = (parseInt(imagen.style.marginTop)+1) +"px";
}
else
clearInterval(reduciendo);
}, 10);
}
// -->
</script>
</body>
</html>
Si te fijas, aunque hemos determinado un ancho de 25px para cada celda, en la celda de la imagen ese 25px no se respeta ya que la imagen ocupa 16px + 50px del margen. Luego la imagen crece sin ningún problema. Si fijamos en vez del ancho de 25px el alto a 25px pasará exactamente igual, no se respeta, pero funciona bien.
¿Puedes poner un pequeño ejemplo de lo que no consigues?
¿Cómo es que tus atributos width y height no concuerdan con tus declaraciones de tamaño en CSS (130x120 frente a 50x50px)?
Por cierto, he modificado el script, que no había puesto las unidades y firefox no sabía como interpretar los parámetros CSS.
Un saludo
