Foros del Web » Programando para Internet » Javascript »

Redimensionar Imagen (en DIV), sentido Left y Top

Estas en el tema de Redimensionar Imagen (en DIV), sentido Left y Top en el foro de Javascript en Foros del Web. Estoy intentando redimensionar una imagen al evento OnMouseOver, y al OnMouseOut retorne su tamaño. He encontrado en la RED muchos ejemplos pero todos ellos al ...
  #1 (permalink)  
Antiguo 15/12/2007, 15:44
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Redimensionar Imagen (en DIV), sentido Left y Top

Estoy intentando redimensionar una imagen al evento OnMouseOver, y al OnMouseOut retorne su tamaño. He encontrado en la RED muchos ejemplos pero todos ellos al redimensionar la imagen empujan lo que encuentra en su camino, es decir los textos, las tablas y otras imagenes (si los hubiera), por lo que decidí colocar mi imagen en un DIV, consideré que iba a ser más práctico.
El siguiente Script he modificado de muchos que existen en la RED a un DIV, que encontrandose dentro del mismo mi imagen ya no empuja nada cuando se redimensiona, pero........ todo los ejemplos que encontré para redimensionar siempre lo hacen de izquierda a derecha y de arriba hacia abajo.
Código PHP:
<body>
<
script language= "JavaScript" type="text/javascript">
function 
aumenta_tamanio(nombre_imagen,cuanto) {
var 
ancho, alto;
I=document.getElementById(nombre_imagen);
ancho=I.width;
alto=I.height;
I.width=cuanto*ancho;
I.height=cuanto*alto;
}
function 
disminuye_tamanio(nombre_imagen,cuanto) {
I=document.getElementById(nombre_imagen);
I.width=I.width/cuanto;
I.height=I.height/cuanto;
}
</script>

<DIV STYLE="position:absolute; top:100px; left:100px; width:120px; height:130px; visibility:visible z-index:1">
<IMG name="milibro" id="MiId" src="MiImagen.gif"  border="0"
    onMouseOver="javascript:aumenta_tamanio(this.name,2);"
    Onmouseout="javascript:disminuye_tamanio(this.name,2);" height=130 width=120>
</DIV> 
</body> 
Lo que Yo necesito es que se redimensione de abajo hacia arriba y de derecha a izquierda ¿es posible?, eso debido a que mi imagen se encuentra situada en el lado derecho, y al redimensionarse excede los límites de mi página mostrando el ScrollBar Horizontal.
- Pensaba probar con propiedades de una imagen como LEFT y TOP, pero estas no existen.
- Por otro lado pensaba en que lo mejor sería REUBICAR el DIV en una posición mucho mas superior para que luego a partir del mismo se redimensione como es habitual. Y ahi va mi pregunta:
¿Cómo puedo ubicar al evento OnMouseOver una nueva posición de TOP y LEFT al DIV para que a partir de esa posición se redimensione como es habitual una imagen de izquierda a derecha y de arriba hacia abajo?, ó...
¿Cómo modificar este Script de manera que la imagen se redimensione de abajo hacia arriba y de derecha a izquierda?

Última edición por Deiv; 17/12/2007 a las 06:45
  #2 (permalink)  
Antiguo 15/12/2007, 18:28
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Hola Deiv:

Voy a intentar darte un ejemplo de cómo lo haría yo, jugando con las propiedades margin de CSS conseguirás este efecto. Eso sí, debe haber espacio suficiente para que la imagen se agrande correctamente, aunque no necesitas un DIV para ello, fíjate:

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">

</
style>
</
head>

<
body>


<
p>Mauris vestibulum tempus felis. Nulla ipsum lorem, auctor nec, pretium quis, auctor eget, tortor. Suspendisse accumsan orci id nisi. Integer egestas velit at nisi. Integer laoreet fermentum erat. Aliquam mollis orci porttitor felis fringilla condimentum. Sed ultrices ligula at magna iaculis feugiat. Integer metus enim, laoreet id, feugiat at, blandit sit amet, massa. Pellentesque nunc lectus, placerat a, malesuada nec, sagittis vitae, orci. Nulla odio erat, iaculis nec, iaculis eget, pellentesque a, lacus. Donec a velit. Donec eros. Nulla metus felis, dignissim ac, condimentum id, consequat bibendum, tortor. Donec eros felis, aliquam eu, mattis non, cursus vel, justo. Phasellus justo elit, dictum at, laoreet quis, venenatis eu, libero. Cras vel mauris. Morbi nec nisi. Aliquam viverra ligula.</p>

<
img id="carita" src="http://www.forosdelweb.com/images/icons/icon10.gif" style="width: 16px; height: 16px; margin-top:50px; margin-left: 50px;" />

<
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. Quisque vestibulum mi. Sed dictum. Proin mi massa, porttitor sit amet, gravida a, sollicitudin vitae, nunc.</p>

<
p>
    <
button type="button" onclick="aumentar()">aumentala a 50 px</button>
    <
button type="button" onclick="reducir()">reducela a 16 px</button>
</
p>

<
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;
            
imagen.style.height = alturaActual + 1;
            
//margen
            
imagen.style.marginLeft = parseInt(imagen.style.marginLeft) - 1;
            
imagen.style.marginTop = parseInt(imagen.style.marginTop) - 1;
        }
        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;
            
imagen.style.height = alturaActual - 1;
            
//margen
            
imagen.style.marginLeft = parseInt(imagen.style.marginLeft) + 1;
            
imagen.style.marginTop = parseInt(imagen.style.marginTop) + 1;
        }
        else
            
clearInterval(reduciendo);
    }, 
10);
}

// -->
</script>

</body>
</html> 

Espero que te inspire para encontrar la solución.


Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.

Última edición por derkenuke; 15/12/2007 a las 18:36
  #3 (permalink)  
Antiguo 16/12/2007, 15:01
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Sonrisa Re: Redimensionar Imagen (en DIV), sentido Left y Top

derkenuke muchísimas! gracias por tu ayuda, tipos como tú valen mucho cuando de una manera desinteresada nos colaboran con algo código. He modificado lo tuyo un poquitín en las siguientes líneas por este otro y he obtenido lo que Yo deseaba:
Código PHP:
<img id="carita" src="http://www.forosdelweb.com/images/icons/icon10.gif" 
style="width: 16px; height: 16px; margin-top:50px; margin-left: 50px;"    
onMouseOver="javascript:aumentar();"
Onmouseout ="javascript:reducir();
height=130 width=120/>  <!--dimensiones de mi Imagen (para mi caso)--> 
El código modificado trabaja muy bien si no existe una Tabla, solo que..... si le pongo dentro de un <TD></TD> de una Tabla,la imagen que crece se pierde en la altura del TD si el TD es menos Alto, y en cambio al crecimiento de su Ancho también crece el TD y empuja lo que encuentra aq su paso.

Pregunta:
¿Habría forma de ubicar la imagen de manera que este se encuentre encima de una tabla?
¿La Respuesta es dentro de un DIV?
  #4 (permalink)  
Antiguo 16/12/2007, 20:08
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 17/12/2007, 07:42
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Hola derkenuke,
Primero que nada una explicación: No respondo muy rápido en el Foro debido a que no tengo conexión a Internet en Casa, me valgo de un CyberCafe, por eso es que tus ejemplos los descargo en mi flash, en casa los pruebo y luego vuelvo al Cyber para responder.
Por la última explicación que das evidentemente, no debería ser así (y disculpa si algunas cosas no entiendo, pues voy novato con eso de la construccion de páginas web), no se que pudo haber pasado, lo cierto es que la sección de la <img></img> la coloqué dentro de en un <TD></TD> y eso me ocurrió, pero ahora probaré tu ejemplo de nuevo y te comunico, vale?
Saludos
  #6 (permalink)  
Antiguo 17/12/2007, 15:22
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Sí, tranquilo, que lo importante es que el post no se muera, no importa demasiado si la frecuencia de respuestas varía entre 2 ó 4 días...

Esperaré a que lo pruebes y ver tus cambios.

Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #7 (permalink)  
Antiguo 17/12/2007, 15:56
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Lo que me pasó fue esto, cambia tus líneas por estos valores, por favor:
Código PHP:
td { 
    
width: 95px; 
    
font-size: 0.5em; 
} 

<
TD><img id="carita" src="http://www.forosdelweb.com/images/icons/icon10.gif"
 
style="width: 64px; height: 64px; margin-top:50px; margin-left: 50px;" onmouseover="aumentar()" onmouseout="reducir()" /></TD> 

function 
aumentar() { 
    var 
hastaCuanto = 150; 
..........
function 
reducir() {  
    var 
hastaCuanto = 64; 
Ahora si es eso lo que me pasó, por eso hablaba de un <DIV> para que la imagen estuviera encima de la Tabla. En el diseño de la página que realizaba yo incluí la imagen justo del mismo tamaño del <TD> y...... era obvio que creciera (ahora que me doy cuenta). Pues en tu primer post tenías razón:
Cita:
Iniciado por derkenuke
Eso sí, debe haber espacio suficiente para que la imagen se agrande correctamente, aunque no necesitas un DIV para ello
Creo el crecimiento ha de estar dependiente de un espacio suficiente con "margin" y obviamente el <TD> tendría que tener ese espacio suficiente, pero en mi diseño de la página no puedo alterar los anchos ni altos de los <TD> que tengo, por eso también en mi primer post hablaba de un DIV ya que ahí la Imagen crecería sin problemas, no te parece?; pues otra forma (si cambias estos valores que te pongo) no veo de tal manera que no haga crecer los <TD>.

Última edición por Deiv; 17/12/2007 a las 16:33
  #8 (permalink)  
Antiguo 17/12/2007, 17:36
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

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...
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #9 (permalink)  
Antiguo 17/12/2007, 17:37
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #10 (permalink)  
Antiguo 19/12/2007, 07:24
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Hola derkenuke, ¿cómo vas?
He revisado tu último ejemplo de aquel código y evidentemente eso es lo que buscaba, pero en verdad para que todo ello funcionara se ha necesitado que el código crezca (y bastante), es muy notorio tus conocimientos en JavaScript son muy buenos, felicitaciones!.
Solo tendría una última duda, en las líneas:
Código PHP:
............
    <
button type="button" onclick="elem2absolute()">a absoluta</button> 
    <
button type="button" onclick="elem2relative()">a relativa</button> 
...........
function 
elem2absolute(elem) { 
................ 
¿No le falta algo a los primeros dos elem2absolute() dentro del paréntesis?, pues me lanza error en la página que estoy diseñando (signos de admiración) en la barra de estado en 2 líneas (no recuerdo en este momento cuales son) y los botones no funcionan. Pues a simple vista pareciera que le falta una variable.
Saludos
  #11 (permalink)  
Antiguo 19/12/2007, 14:10
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #12 (permalink)  
Antiguo 21/12/2007, 06:47
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Redimensionar Imagen (en DIV), sentido Left y Top

¡Que bueno! derkenuke, como ya mencioné a eso quería llegar, no queda mas que agradecerte y esperemos que este Hilo del Foro algún día sirva a muchos que lo requieran que muy atentamente seguiste los post hasta darle una solución.
Una última consulta, aunque este no sea muy importante, he llevado el último código a un Archivo .JS separado, y con el ejemplo que me envías funciona perfectamente, pero no sé por alguna razón en el diseño de mi página (tiene muchos Scripts) no me funciona ¿A que se deberá todo ello? ¿Crees que esté haciendo conflicto de variables con otros Scrtipts que tengo?.
Lo mas interesante es que si tu código Script lo pongo dentro de mi Index.htm funciona perfectamente. Muy curioso, no crees?
  #13 (permalink)  
Antiguo 21/12/2007, 08:02
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Hola Deiv:

Gracias por los elogios, todos los usuarios estamos aquí para proponer y resolver problemas y enseñar a resolverlos poco a poco


Si tienes muchos scripts en tu página, lo más normal es que haya conflictos cuando seteamos el window.onload. Muchos scripts hacen cosas en el evento de carga del documento y si lo ponemos tal y como lo tenemos hasta ahora estamos sobreescribiendo lo que otros scripts podrían haber hecho.

Para ello existe la solución de mirar si window.onload ya había sido fijado, mediante la famosa addLoadEvent():

Código PHP:
function addLoadEvent(func) {
  var 
oldonload = window.onload;
  if (
typeof window.onload != 'function') {
    
window.onload = func;
  } else {
    
window.onload = function() {
      if (
oldonload) {
        
oldonload();
      }
      
func();
    }
  }
}

//maneras de uso:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  
/* more code to run on page load */ 
}); 

Si aún así tuvieramos problemas, deberíamos hacer una función autoejecutable y anónima para que todas nuestras variables globales (como cambiando y nuestras propias funciones) pasen a ser variables locales. Puedes echar un vistazo a estas fuente:
Funciones anónimas y autoejecutables en javascript



Si, después de lo del cambio del window.onload y de hacer todo el código una función anónima y autoejecutable, no te funcionara correctamente, sería cuestión de ir revisando paso por paso lo que falla, habría que meterse con ese problema secundario.



Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #14 (permalink)  
Antiguo 24/12/2007, 15:36
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Redimensionar Imagen (en DIV), sentido Left y Top

En fin...... puedo notar que me queda un largo camino por estudiar y entender muchas cosas derkenuke, eso lo del window.onload tienes mucha razón, en ningún momento me percaté de que debía darsele importancia. La primera parte del código está claro; tres consultas por favor:

- ¿En donde coloco ese script?, ¿en el mismo cuerpo del HTML o en un Archivo .JS?

- No entiendo cómo se utiliza (y lo propio ¿donde coloco?) aquella segunda parte del código debajo de donde dice "//maneras de uso: "

- Una vez funcionando ese ejemplo que muestras... ¿funcionarán si tengo (por ejemplo) Varios Scripts que necesiten el window.onload?

Feliz Navidad a todos del Foro!!!
  #15 (permalink)  
Antiguo 24/12/2007, 18:03
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Redimensionar Imagen (en DIV), sentido Left y Top

Hola de nuevo por aquí:

Te respondo a tus cuestiones:

Tu script puede ir en cualquier lado, en el body al principio, al final, en el head, o en un archivo a parte: en todos lados funcionará porque lo hemos hecho funcionar para que cuando se cargue la página se ejecute. Siempre se ejecutará en el mismo momento, independientemente de cuando se lea.
Lo más recomendable es colocarlo en un archivo con extensión js, que sea independiente de tu documento (x)html en donde controlas únicamente el contenido, así no lo ensucias demasiado.

Para utilizar el addLoadEvent() debes hacerlo así:
Si antes era:
Código PHP:
window.onload = function() {
  
alert("hola mundo");
} 
Ahora debe ser así:
Código PHP:
function holaMundo() { alert("hola mundo"); }
addLoadEvent(holaMundo);
// u otra posibilidad:
addLoadEvent( function() {
  
alert("hola mundo");
} ); 
La manera de utilizar esa función es pasándole otra función por argumento... Sé que al principio pasar funciones como argumentos resulta un poco abstracto, pero luego se ve enseguida su potencia.


Y sí, una vez colocado así funcionará con otros scripts que tengas que utilicen window.onload, pero has de saber que al final window.onload sólo hay uno, y que no puedes poner que a() y b() se ejecuten en el window.onload sin crear una función c() auxiliar que las aúne y que quede definida así:
function c() { a(); b(); }
y asignarla al onload (window.onload = c; )
En definitiva addLoadEvent() lo que hace es mirar si había una a() cuando queremos insertar nuestra b(), y si la había, crea entonces la c() agrupadora.
Tienes que tener en cuenta eso, que no pueden haber dos asignaciones a window.onload y que funcionen las dos (funcionará la última).



Un saludo y felices navidades
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:29.