Hola de nuevo
Deiv.
Lo siento por el error, los cambios de última hora: Los botones sobran, no los queremos para nada. El
elem dentro de
elem2absolute() es el elemento que queremos que cambie de absolute a relative y de relative a absolute. El código simplemente funciona haciendo mouseover y mouseout en la imagen.
Sí, el código ha engordado un poco... es lo básico para que la imagen cambie a absoluta y se asignen los dos eventos para aumentar y reducir. En realidad se puede recortar un poquito...:
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>
<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];
}
var cambiando; // los procesos
function cambiarTamanyo(elem, paso, hastaCuanto) {
// Si estan iniciados los procesos los paramos
clearInterval(cambiando);
// Proceso aumentativo
//var elem0 = elem; // closure
//var paso0 = paso;
cambiando = setInterval( function() {
var anchuraActual = parseInt( elem.style.width );
var alturaActual = parseInt( elem.style.height );
if( (paso>0 && anchuraActual<hastaCuanto && alturaActual<hastaCuanto) || // Si podemos aumentar todavía, aumentamos
(paso<0 && anchuraActual>hastaCuanto && alturaActual>hastaCuanto)
) {
//dimensiones
elem.style.width = (anchuraActual+paso) +"px";
elem.style.height = (alturaActual+paso) +"px";
//margen
elem.style.marginLeft = (parseInt(elem.style.marginLeft)-paso) +"px";
elem.style.marginTop = (parseInt(elem.style.marginTop)-paso) +"px";
}
else // Si no, paramos
clearInterval(cambiando);
}, 10);
}
window.onload = function() {
//localizamos el elemento
var imagen = $("carita");
//lo ponemos en absoluto, y no debería cambiar su posición
var coordenadas = findPos(imagen);
imagen.style.left = coordenadas[0] +"px";
imagen.style.top = coordenadas[1] +"px";
imagen.style.position = "absolute";
//adjuntamos los eventos
imagen.onmouseover = function() {
cambiarTamanyo(this, 1, 150);
}
imagen.onmouseout = function() {
cambiarTamanyo(this, -1, 64);
}
}
// -->
</script>
</body>
</html>
Ahora esta más "simplificado", pero no tan legible. Tenemos una función principal
cambiarTamanyo(), que sustituye a
aumentar() y
reducir(), luego tenemos la función
findPos() que no podemos eliminar, pero la copié
, y la
$() para acortar al escribir... a parte de eso seteamos el evento
window.onload, y ya no tenemos nada más en el script.
Supongo que ha quedado mejor ¿no?
Un saludo
