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.

Tutores.org

Inicio > Dhtml

Visitas: 31,843 - 20/10/2003 2:50:52

EXPLICACION

Debemos moficar /images/mundo.gif por la imagen que quieras.

CODIGO

Este codigo aun no ha sido probado por Tutores.org en Opera

Este codigo aun no ha sido probado por Tutores.org en Safari

<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function resizeImage (imageOrImageName, width, height) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
image.currentWidth = width;
image.currentHeight = height;
var layerWidth = image.width > width ? image.width : width;
var layerHeight = image.height > height ? image.height : height;
if (!image.overLayer) {
var l = image.overLayer = new Layer(layerWidth);
}
var l = image.overLayer;
l.bgColor = document.bgColor;
l.clip.width = layerWidth;
l.clip.height = layerHeight;
l.left = image.x;
l.top = image.y;
var html = '';
html += '<IMG SRC="' + image.src + '"';
html += image.name ? ' NAME="overLayer' + image.name + '"' : '';
html += ' WIDTH="' + width + '" HEIGHT="' + height + '">';
l.document.open();
l.document.write(html);
l.document.close();
l.visibility = 'show';
}
else {
image.width = width;
image.height = height;
}
}
function zoomImage (imageOrImageName, factor) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
var currentWidth = image.currentWidth ? image.currentWidth :
image.width;
var currentHeight = image.currentHeight ? image.currentHeight :
image.height;
}
else {
var currentWidth = image.width;
var currentHeight = image.height;
}
var width = parseInt(currentWidth * factor);
var height = parseInt(currentHeight * factor);
resizeImage(image, width, height);
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: resizeImage(document.images[0], 100, 100); void 0"> 100 100
</A> | <A HREF="javascript: resizeImage(document.images[0], 190, 190); void 0">
200 200 </A> | <A HREF="javascript: zoomImage(document.images[0], 1.1); void 0">
zoom + 10% </A> | <A HREF="javascript: zoomImage(document.images[0], 0.9); void 0">
zoom - 10% </A> <BR>
<IMG SRC="/images/mundo.gif">
</BODY>
</HTML>

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

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

COMENTARIOS

Comentario usuario

Laura 21-12-2007 19:24:10

2 5

no me funciono.

Comentario usuario

Tutores.org 19/04/2003

5 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

ruben 10-03-2009 17:46:59

1 5

me sirvio lo copie exactamente, cambie el nombre de la imagen y logro el zoom...
muchas gracias

Comentario usuario

halleyhalley

2 5

ok, esta bueno el código, me sirvió el script,muchas gracias

Comentario usuario

interweb 28-10-2011 03:58:41

1 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.