Propiedades de imagen

xav1 · #1 (**permalink**) 01/04/2010, 12:05

Buenas tardes,

No toco mucho el javascript, pero me gustaria redimensionar una imagen a la mitad, he intentado sacar este código y no me acaba de funcionar....

Código PHP:

  <script>

function aa(img) {

img1 = new Image();

img1.src = img;

img1.width=img1.width/2;

img1.height=img1.height/2;   

}

</script>

Código PHP:

  <img src="<%=rs.fields(2)%>" onload="aa(<%=rs.fields(2)%>)" border="0">

en rs.fields(2) se almacena la ruta entera de la imagen

¿Que falla en el código?

Gracias.

Adler · #2 (**permalink**) 01/04/2010, 12:14

Hola

A ver si esto te da alguna idea

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function redimensionar (accion) {
var height, width
var alto = document.getElementById("mesa").height;
var ancho = document.getElementById("mesa").width;
if (accion == 'sumar') {
height = parseInt(alto+10);
width = parseInt(ancho+10);
document.getElementById("mesa").style.height = height + "px";
document.getElementById("mesa").style.width = width + "px";
}
else
{
height = parseInt(alto-10);
width = parseInt(ancho-10);
document.getElementById("mesa").style.height = height + "px";
document.getElementById("mesa").style.width = width + "px";
}
}
</script>
</head>
<body>
<img src="iconos/anixmas11.gif" id="mesa" width="50px" height="53px" /><br/>
<input type="button" value="+" onclick="redimensionar('sumar')" /><br/>
<input type="button" value="-" onclick="redimensionar()" />
</body>
</html>

Suerte

xav1 · #3 (**permalink**) 01/04/2010, 12:21

Creo que me va a ir genial! muchas gracias! luego lo pruebo y te digo!

xav1 · #4 (**permalink**) 01/04/2010, 12:40

Hola de nuevo!

Veamos a ver.... siguiendo (o intentandolo jeje) el ejemplo que me has puesto he echo esto.....

Código PHP:

  <script>

function aa() {

var height, width

var alto = document.getElementById("imagen").height;

var ancho = document.getElementById("imagen").width;

 
height = parseInt(alto/4);

width = parseInt(ancho/4);

 
document.getElementById("imagen").style.height = height + "px";

document.getElementById("imagen").style.width = width + "px";

 
}

</script>

Código PHP:

  <img src="<%=rs.fields(2)%>" onload="aa()" border="0">

Y tampoco va :( no puedo redimensionar la imagen a la mitad :s

Adler · #5 (**permalink**) 01/04/2010, 13:34

Hola

Como decías en tu primer post <%=rs.fields(2)%> te trae la ruta completa de la imagen. Así que si solo es una imagen la que imprimes, entonces solamente has de darle la id imagen a esa imagen. En caso que te imprimas mas de una, dale una id distinta a cada una con un contador

Código ASP:

Ver original<% i = 0
' aquí todas la imágenes usando el contador en la id de cada imagen 
i = i +1
%>

Un ejemplo de como quedaría, es algo como esto

Código ASP:

Ver original<img src="<%=rs.fields(2)%>" id="imagen_<%=i%>" onload="aa(this.id)" border="0">

Ahora en el js has de recibir el argumento

Código Javascript:

Ver originalfunction aa(imagen) {
var height, width
var alto = document.getElementById(imagen).height;

Suerte

xav1 · #6 (**permalink**) 02/04/2010, 07:54

Código PHP:

  <script>

function aa(imagen) {

var height, width

var alto = document.getElementById(imagen).height;

var ancho = document.getElementById(imagen).width;

 
height = parseInt(alto/4);

width = parseInt(ancho/4);

 
document.getElementById("imagen").style.height = height + "px";

document.getElementById("imagen").style.width = width + "px";

 
}

</script>

Código PHP:

  i=0

while not rs.eof 

if rs.fields("any")=request.QueryString("any") and request.QueryString("seccio")=rs.fields("seccio") then

i=i+1

if celda=0 then

 
.....

 
<a href="ver_album.asp?id=<%=rs.fields(0)%>"><img src="<%=rs.fields(2)%>" id="imagen_<%=i%>" onload="aa(this.id)" border="0"></a>

Sigue sin funcionar :s me deja la imagen a tamaño real. ¿Alguna idea de pq?

Adler · #7 (**permalink**) 02/04/2010, 08:11

Hola

A ver, no lo entiendo. Ese vinculo te va a enviar a ver_album.asp. Así que me lleva a pensar que tu propósito es redimensionar la imagen en esa página ¿es así?

Por otro lado, quita las doble comillas, ya que imagen es una variable

Cita:

document.getElementById("imagen").style.height = height + "px";
document.getElementById("imagen").style.width = width + "px";

Suerte

xav1 · #8 (**permalink**) 02/04/2010, 08:32

Perfecto! ya me funciona!

Ahora solo me queda introducir unos if's a la funcion para que la foto la divida depende de lo grande que sea para que queden todas bien.

Muchas gracias por la ayuda!! de verdad!!

El link te lleva al album entero, que tb tengo que implementarle la funcion, pero de momento, se la estoy intentando implementar a los albumes :)

xav1 · #9 (**permalink**) 02/04/2010, 09:14

Perdona mi ignorancia y insistencia, eske nunca he tocada javascript....

He modificado el codigo de antes añadiendo unos if's....

<script>
function aa(imagen) {
var height, width
var alto = document.getElementById(imagen).height;
var ancho = document.getElementById(imagen).width;

if (alto => 1900 && alto =< 2100) {
height = parseInt(alto/20);
}
if (ancho => 2500 && ancho =< 2700) {
width = parseInt(ancho/20);
}

if (alto => 1700 && alto =< 1899) {
height = parseInt(alto/19);
}
if (ancho => 2300 && ancho < 2499) {
width = parseInt(ancho/19);
}

if (alto => 1500 && alto =< 1699) {
height = parseInt(alto/18);
}
if (ancho => 2100 && ancho < 2299) {
width = parseInt(ancho/18);
}

...

document.getElementById(imagen).style.height = height + "px";
document.getElementById(imagen).style.width = width + "px";

}
</script>

pero ahora no funciona :s alguna idea? gracias.

Adler · #10 (**permalink**) 02/04/2010, 12:55

Hola

En este caso el orden si altera el producto

Cita:

if (alto => 1900 && alto =< 2100) cámbialo por if (alto >= 1900 && alto <= 2100)

Claro está los demás también has de cambiarlos

Suerte

xav1 · #11 (**permalink**) 02/04/2010, 16:37

Pues todo perfecto, de no haber echo nada en javascript a esto, jeje. Muchas gracias por la ayuda de verdad!