Ahora viene lo bueno jeje.
Una solución que me ha valido para los dos navegadores es cambiar la posición de relativa a absoluta sin modificar sus coordenadas actuales (transparentemente a los ojos del usuario final). El script en cuestión es éste:
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;" /></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); }
// créditos findPos: http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
function elem2absolute(elem) {
var coordenadas = findPos(elem);
elem.style.left = coordenadas[0] +"px";
elem.style.top = coordenadas[1] +"px";
elem.style.position = "absolute";
}
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);
}
window.onload = function() {
//localizamos el elemento
var imagen = $("carita");
//lo ponemos en absoluto, y no debería cambiar su posición
elem2absolute(imagen);
//adjuntamos los eventos
imagen.onmouseover = function() {
aumentar(this, 150);
}
imagen.onmouseout = function() {
reducir(this, 64);
}
}
// -->
</script>
</body>
</html>
El FF tiene el mismo efecto, y en IE funciona igual, con el pequeño "truco".
¿Es ésto lo que estás buscando?
Un saludo
