Hola otra vez:
Bien, ahora empiezo a entender todo un poquito mejor. Como bien me citas, para que la imagen crezca hasta 150px midiendo inicialmente 64, hay que reservar un total de 150px en la celda. Como ya tenemos los 64 que ocupa la imagen, los márgenes deben ser de 150-64, osea de 86px. Si compruebas esta página verás que todo sigue funcionando bien:
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: 95px;
font-size: 0.5em;
padding: 0;
margin: 0;
}
</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: 64px; height: 64px; margin-top:86px; margin-left: 86px;" 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 = 150;
// 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 = 64;
// 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>
Ahora llega tu problema, que no puedes modificar los anchos de tus celdas. Si tiene que quedarse el ancho de la celda a 95px y quieres que la imagen sea de 150px, no queda más remedio que poner la imagen en position: absolute.
Igual hay que parirse un pequeño script para detectar la posición de una imagen en el documento, y pasarla a position: absolute sin que se entere el usuario... y después volverla a encajar en su sitio y ponerle position: relative y todos contentos... recuerdo que lo hice una vez.
Pero fíjate que para FF no hace falta hacer nada de ésto, lo interpreta como es y no varía a la tabla para nada:
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: 95px;
font-size: 0.5em;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="float: left; width: 50%;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pharetra, justo hendrerit tincidunt adipiscing, tortor nulla ultricies velit, sit amet sodales turpis nunc quis nulla. Morbi lacinia consectetuer risus. Vivamus commodo, arcu vel interdum ultrices, turpis nisi mollis tellus, vitae vulputate lacus pede id neque. Aliquam aliquet leo quis nibh. Sed tempus, est in laoreet ornare, ligula lectus auctor arcu, vitae sodales ipsum elit ut nisi. Vestibulum aliquet dolor vel nunc. Maecenas gravida fermentum dolor. Aliquam laoreet metus in lacus. Maecenas quis augue sed orci vulputate rutrum. Sed mauris. Etiam nisi nulla, viverra sed, commodo at, sollicitudin sed, tellus. Integer sem quam, pharetra eget, dictum a, sodales non, dolor. Vivamus orci. Nunc vestibulum scelerisque sem. Sed convallis iaculis lorem. Vivamus odio. Quisque a pede sed sem adipiscing mattis. Donec nonummy ante venenatis diam. Ut ultricies rutrum ligula. Nam nulla odio, pretium nec, molestie ut, tempor ut, sem.</p>
</div>
</div>
<TABLE border="1" style="border-collapse: collapse; float: left; ">
<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="position: relative; width: 64px; height: 64px; margin-left: 0; margin-top: 0;" onmouseover="aumentar(this, 150)" onmouseout="reducir(this, 64)" /></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>
<p>
<button type="button" onclick="elem2absolute()">a absoluta</button>
<button type="button" onclick="elem2relative()">a relativa</button>
</p>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
var aumentando, reduciendo; // los procesos
function aumentar(elem, hastaCuanto) {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Proceso aumentativo
var elem0 = elem; // closure
aumentando = setInterval( function() {
var anchuraActual = parseInt( elem0.style.width );
var alturaActual = parseInt( elem0.style.height );
if( anchuraActual<hastaCuanto && alturaActual<hastaCuanto ) { // Si podemos aumentar todavía, aumentamos
//dimensiones
elem0.style.width = (anchuraActual+1) +"px";
elem0.style.height = (alturaActual+1) +"px";
//margen
elem0.style.marginLeft = (parseInt(elem0.style.marginLeft)-1) +"px";
elem0.style.marginTop = (parseInt(elem0.style.marginTop)-1) +"px";
}
else // Si no, paramos
clearInterval(aumentando);
}, 10);
}
function reducir(elem, hastaCuanto) {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Proceso reductivo
var elem0 = elem; // closure
reduciendo = setInterval( function() {
var anchuraActual = parseInt( elem0.style.width );
var alturaActual = parseInt( elem0.style.height );
if( anchuraActual>hastaCuanto && alturaActual>hastaCuanto ) {
//dimensiones
elem0.style.width = (anchuraActual-1) +"px";
elem0.style.height = (alturaActual-1) +"px";
//margen
elem0.style.marginLeft = (parseInt(elem0.style.marginLeft)+1) +"px";
elem0.style.marginTop = (parseInt(elem0.style.marginTop)+1) +"px";
}
else
clearInterval(reduciendo);
}, 10);
}
// -->
</script>
</body>
</html>
Mientras que IE sí. Aquí he puesto varios cambios ya, aumentar() y reducir() funcionan con parámetros directamente y el margin-top y left está definido a cero (el position:relative no hace falta creo). Además de introducir texto antes de la tabla para ver los resultados.
Voy al siguiente post para seguir respondiendo que el límite de 10 000 caracteres anda advirtiendo cositas...