Agrandar imagen al pasar el muose no funciona bien

soypepepompin · #1 (**permalink**) 24/12/2010, 09:57

Bueno el tema es asi.

Tengo dos imagenes pequeñas. cuando paso el mouse se agrandan pero el tema es que cuando paso sobre la imagen de arriba tendria que tapar a la segunda..,. pero no lo hace...

Alguien sabe como soluccinar este problema.

Recomiendo para que entiendan bien el problema hagn copy paste y sale andando el script

Código PHP:

   
<html> 
<head> 
<script type language="javascript"> 
function cambia(valor)  
{  
document.all(valor).width="150";  
document.all(valor).height="150";  
} 
function cambia2(valor2) 
{  
document.all(valor2).width="30";  
document.all(valor2).height="38";  
}  
</script> 
 
 
<style type="text/css"> 
<!-- 
 
#opciones{ 
    width:500px; 
    height:130px; 
} 
 
#caja1{ 
    position: absolute; 
    margin:-10px 0 0 30px; 
} 
 
#caja2{ 
    position: absolute; 
    margin:-10 0 0 28px; 
} 
 
--> 
</style> 
 
 
</head> 
<body> 
 
 
<div id="opciones"> 
    <br> 
     
    Esta es la primer opcion 
     
    <div id="caja1"> 
    <img alt src="http://www.remerascopadas.com.ar/disenos/74-carita_1_350.jpg" width="30" height="38" border="0" name="img" onMouseOver="cambia(this.name);" onMouseOut="cambia2(this.name);">  
    </div> 
     
     
     
    <br><br><br> 
    Esta es la seguna opcion 
     
    <div id="caja2"> 
    <img alt src="http://2.bp.blogspot.com/_Ayhc-epwQwY/RgzPXkPRyfI/AAAAAAAAADo/M8og2Pa5_Yo/s400/cute_charuca.jpg" width="30" height="38" border="0" name="img2" onMouseOver="cambia(this.name);" onMouseOut="cambia2(this.name);">  
    </div> 
 
 
</div> 
     
</div> 
 
 
</body> 
</html>

bitbow · #2 (**permalink**) 24/12/2010, 15:10

Saludos, utiliza el getElementById, de la forma en que lo estas haciendo si obtienes el componente pero no le estas cambiando nada ya que lo pasas como parametro, entonces con elemenbyid le puedes establecer las propiedades, ademas le tendrias que agregar los id a los componentes.

document.getElementById('texto').width = 2223

Suerte.

soypepepompin · #3 (**permalink**) 27/12/2010, 09:55

hola bitdow, no te aclare antes pero mi nivel de conocimientos no son tan avanzados como para comprender lo que me explicaste.

me podrias explicar un poco mas en detalle?

soypepepompin · #4 (**permalink**) 28/12/2010, 06:32

Hola bit.

Intente ver como usar document.getElementById('texto').width = 2223 pero mori en el intento

no me puedes comentar un poco mas como hacer?

walterdevel · #5 (**permalink**) 28/12/2010, 07:54

Puedes modificar esta función:

Código Javascript:

Ver originalfunction cambia(valor) 
{ 
document.all(valor).width="150"; 
document.all(valor).height="150"; 
}
function cambia2(valor2)
{ 
document.all(valor2).width="30"; 
document.all(valor2).height="38"; 
} 
</script>

por esta

Código Javascript:

Ver originalfunction cambia(valor) 
{ 
valor.width=150; 
valor.height=150; 
}
function cambia2(valor2)
{ 
valor.width=30; 
valor.height=38; 
} 
</script>

Me olvidaba...

y los eventos como este onMouseOut="cambia2(this.name);"

cambialos todos a onMouseOut="cambia2(this);"

que solo quede this entre paréntesis

soypepepompin · #6 (**permalink**) 03/01/2011, 17:39

Si ahora funciona !!!!

Gracias !