Publicentral.com - promocion de paginas webpromocion de paginas web
Mostrando Codigo - Dhtml
Code

Dhtml - Como cambiar el tamaño de una imagen dinamicamente

Códigos Dhtml

Este script puede ser muy util si tenemos una galeria de imagenes, puesto que el visitante aumentar o bien disminuir la imagen segun le guste.
Visitas: 30,528 - 20/10/2003 2:50:52
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Debemos moficar /images/mundo.gif por la imagen que quieras.
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. function resizeImage (imageOrImageName, width, height) {
  2.   var image = typeof imageOrImageName == 'string' ?
  3.                 document[imageOrImageName] : imageOrImageName;
  4.   if (document.layers) {
  5.     image.currentWidth = width;
  6.     image.currentHeight = height;
  7.     var layerWidth = image.width > width ? image.width : width;
  8.     var layerHeight = image.height > height ? image.height : height;
  9.     if (!image.overLayer) {
  10.       var l = image.overLayer = new Layer(layerWidth);
  11.     }
  12.     var l = image.overLayer;
  13.     l.bgColor = document.bgColor;
  14.     l.clip.width = layerWidth;
  15.     l.clip.height = layerHeight;
  16.     l.left = image.x;
  17.     l.top = image.y;
  18.     var html = '';
  19.     html += '<IMG SRC="' + image.src + '"';
  20.    html += image.name ? ' NAME="overLayer' + image.name + '"' : '';
  21.    html += ' WIDTH="' + width + '" HEIGHT="' + height + '">';
  22.     l.document.open();
  23.     l.document.write(html);
  24.     l.document.close();
  25.     l.visibility = 'show';
  26.   }
  27.   else {
  28.     image.width = width;
  29.     image.height = height;
  30.   }
  31. }
  32. function zoomImage (imageOrImageName, factor) {
  33.   var image = typeof imageOrImageName == 'string' ?
  34.                 document[imageOrImageName] : imageOrImageName;
  35.   if (document.layers) {
  36.     var currentWidth = image.currentWidth ? image.currentWidth :
  37. image.width;
  38.     var currentHeight = image.currentHeight ? image.currentHeight :
  39. image.height;
  40.   }
  41.   else {
  42.     var currentWidth = image.width;
  43.     var currentHeight = image.height;
  44.   }
  45.   var width = parseInt(currentWidth * factor);
  46.   var height = parseInt(currentHeight * factor);
  47.   resizeImage(image, width, height);
  48. }
  49. </HEAD>
  50. <A HREF="javascript: resizeImage(document.images[0], 100, 100); void 0"> 100 100
  51. </A> | <A HREF="javascript: resizeImage(document.images[0], 190, 190); void 0">
  52. 200 200 </A> | <A HREF="javascript: zoomImage(document.images[0], 1.1); void 0">
  53. zoom + 10% </A> | <A HREF="javascript: zoomImage(document.images[0], 0.9); void 0">
  54. zoom - 10% </A> <BR>
  55. <IMG SRC="/images/mundo.gif">
  56. </BODY>
  57. </HTML>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Como cambiar el tamaño de una imagen dinamicamente" href="http://www.tutores.org/codigo/774/" target="_blank">Como cambiar el tamaño de una imagen dinamicamente</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
21-12-2007 19:24:10
5 5
no me funciono.
Comentario usuario
19/04/2003
1 5
Hola laura
Descargate el código en formato de texto o obtén el codigo html de la demo
Verás como si te funciona
Saludos
Comentario usuario
10-03-2009 17:46:59
4 5
me sirvio lo copie exactamente, cambie el nombre de la imagen y logro el zoom...
muchas gracias
Comentario usuario
halley
2 5
ok, esta bueno el código, me sirvió el script,muchas gracias
Comentario usuario
28-10-2011 03:58:41
3 5
SI sirve pero sólo para una imagen, para varias nó, porqué?
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.