Foros del Web » Programando para Internet » Javascript »

Reducir tamaño de imagen dinámica con javascript

Estas en el tema de Reducir tamaño de imagen dinámica con javascript en el foro de Javascript en Foros del Web. tengo un campo de imagen dinámico $row_muestra['imagen'] lo que pasa es que las imagenes del campo están metidas con todo el código html <img src="ruta ...
  #1 (permalink)  
Antiguo 06/11/2008, 05:50
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Reducir tamaño de imagen dinámica con javascript

tengo un campo de imagen dinámico


$row_muestra['imagen']

lo que pasa es que las imagenes del campo están metidas con todo el código html
<img src="ruta de la imagen"> no hay ningún id de identificación

Como haría para poder reducir el tamaño de la imagen

Tengo este código pero no me sirve

Cita:
<script type="text/javascript">
function cambiaTamanio(){
if (document.images) {
document.images.logo.width=150;
document.images.logo.height=120;
} else {
logo = document.getElementById("logo");
logo.width = 150;
logo.height = 120;
}
Para lanzar la función
</p><input type="button" onClick="cambiaTamanio()" value="Cambiar tamaño"/>

Última edición por jordi45; 06/11/2008 a las 05:56
  #2 (permalink)  
Antiguo 06/11/2008, 07:42
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

Código JavaScript:
Ver original
  1. function cambiaTamanio(){
  2. if (document.images) {
  3. document.images.logo.width='150px';
  4. document.images.logo.height='120px';
  5. } else {
  6. logo = document.getElementById("logo");
  7. logo.width = '150px';
  8. logo.height = '120px';
  9. }

  #3 (permalink)  
Antiguo 06/11/2008, 07:48
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

Cita:
Iniciado por Fernand0 Ver Mensaje
Código JavaScript:
Ver original
  1. function cambiaTamanio(){
  2. if (document.images) {
  3. document.images.logo.width='150px';
  4. document.images.logo.height='120px';
  5. } else {
  6. logo = document.getElementById("logo");
  7. logo.width = '150px';
  8. logo.height = '120px';
  9. }

gracias por los px, me he explicado mal ese código que he puesto sólo vale para una imagen <img src ="cualuier cosa"> que tenga además el id="logo"
Entonces lo hace pero si son más de una, modifica el tamaño de la primera y la segunda se queda igual.

Pregunto como se haría para una imagen dinámica $row_muestra['imagen']
donde el campo ('imagen'] no tiene ningún id
  #4 (permalink)  
Antiguo 06/11/2008, 07:57
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

Si no tiene ID... tendrias que manejarte con una ruta de nodos... o basarte en la ruta del SRC...

Yo no se como esta constituido tu HTML.. asi que no pudo ayudarte demasiado....

Tendrias que usar getElementsByTagName().... tendrias que situarte en el nodo contenedor de las imagenes...

Código PHP:
NODOCONTENEDORDELASIMAGENES.getElementsByTagName('img'); 
  #5 (permalink)  
Antiguo 06/11/2008, 08:08
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

Cita:
Iniciado por Fernand0 Ver Mensaje
Si no tiene ID... tendrias que manejarte con una ruta de nodos... o basarte en la ruta del SRC...

Yo no se como esta constituido tu HTML.. asi que no pudo ayudarte demasiado....

Tendrias que usar getElementsByTagName()[/URL].... tendrias que situarte en el nodo contenedor de las imagenes...

Código PHP:
NODOCONTENEDORDELASIMAGENES.getElementsByTagName('img'); 

al ejecutar el php del campo [imagen]
salen todas las imagenes con el código <img src="http://www.forosdelweb.com/images/foto/el nombre y extensión particular"> lo que quiero es cambiar el tamaño de todas
  #6 (permalink)  
Antiguo 06/11/2008, 08:19
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

Código JavaScript:
Ver original
  1. function cambiaTamanio(){
  2. var cond='http://www.forosdelweb.com/images/foto/';
  3. var iMg=document.getElementsByTagName('img');
  4.  
  5. for(var i=0; i<iMg.length; ++i) {
  6. if(iMg.src.match(cond)) {
  7. iMg[i].width='150px'; iMg[i].height='120px';
  8. }
  9. }
  10. }

Fijate si esto es lo que queres..
  #7 (permalink)  
Antiguo 06/11/2008, 08:31
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

Cita:
Iniciado por Fernand0 Ver Mensaje
Código JavaScript:
Ver original
  1. function cambiaTamanio(){
  2. var cond='images/foto/';
  3. var iMg=document.getElementsByTagName('img');
  4.  
  5. for(var i=0; i<iMg.length; ++i) {
  6. if(iMg.src.match(cond)) {
  7. iMg[i].width='150px'; iMg[i].height='120px';
  8. }
  9. }
  10. }

Fijate si esto es lo que queres..
lo he puesto así y no funciona
  #8 (permalink)  
Antiguo 06/11/2008, 08:39
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

Código javascript:
Ver original
  1. function cambiaTamanio() {
  2.     var cond='images/foto';
  3.     var iMg=document.getElementsByTagName('img');
  4.      
  5.     for(var i=0; i<iMg.length; ++i) {
  6.         if(iMg[i].src.match(cond)) {
  7.             iMg[i].style.width='150px'; iMg[i].style.height='120px';
  8.         }
  9.     }
  10. }
  #9 (permalink)  
Antiguo 06/11/2008, 08:49
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

Gracias ha funcionado pero como sería que saltara esa función desde un submit

<input type="submit" name="Submit" value="Enviar">
y ahora me he dado cuenta que

hay mas categorías de fotos tengo 5 carpetas diferentes como sería hacerlo con más de una condición foto, foto2, foto3, foto4 y foto5

var cond='images/foto';

Última edición por jordi45; 06/11/2008 a las 09:22
  #10 (permalink)  
Antiguo 06/11/2008, 10:19
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Respuesta: Reducir tamaño de imagen dinámica con javascript

Hola jordi45

No hace falta que cites los mensajes para contestar.

Saludos,
  #11 (permalink)  
Antiguo 06/11/2008, 10:30
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

Con var cond='images/foto'; alcanza para las 5 carpetas... no importa si es foto2 foto3.. fotoASDADA.. funciona igual... ahora si lo que queres es.. diferenciarlos...

Código PHP:
var cond='images/foto/'cond2='images/foto2/', ...;

if(
iMg[i].src.match(cond)) {
.....
}
else if(
iMg[i].src.match(cond2)) {
.....
}
etc.. 
Desde un submit...? El submit es para formularios... no entiendo que queres hacer
  #12 (permalink)  
Antiguo 06/11/2008, 10:42
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

De acuerdo había puesto detrás de foto/ y por eso no me abarcaba más carpetas


Funciona perfectamente



lo del submit es porque las fotos salen desde un formulario php, con la orden submit, en vez de poner con un botón input por separado que desde el mismo submit lance la función del javascript de cambiar el tamaño de las fotos.
  #13 (permalink)  
Antiguo 06/11/2008, 10:46
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Reducir tamaño de imagen dinámica con javascript

<body onload="cambiaTamanio();">

Pones eso en la hoja de las imagens y ya esta... cuando se carga la hoja.. ejecuta el comando..

  #14 (permalink)  
Antiguo 06/11/2008, 10:57
 
Fecha de Ingreso: octubre-2008
Mensajes: 168
Antigüedad: 15 años, 5 meses
Puntos: 2
Respuesta: Reducir tamaño de imagen dinámica con javascript

Todo OK


Otra forma de redimensionar imagenes desde javascript, el problema es que cuando hice la base de datos no tenía ni idea y metía el código entero en vez de solo la dirección de la imagen y luego simplemente añadirle el <img src="$row_mostrar['imagen'] width="150" height"=120">

con este código javascript solucionado el problema

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 14:19.