Cómo alargar una imagen en miniatura en código HTML

Escrito por kevin lee | Traducido por paulo roldan
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo alargar una imagen en miniatura en código HTML
Utiliza JavaScript para contar con versiones de alta calidad de tus imágenes en miniatura. (Burke/Triolo Productions/Brand X Pictures/Getty Images)

Uno de los secretos para ampliar imágenes sin distorsionarlas es utilizar el cambio de tamaño proporcional, o el aumento de las dimensiones horizontal y vertical de una imagen por el mismo factor de porcentaje. Las vistas en miniatura, que son versiones pequeñas de las imágenes más grandes, permiten colocar varias imágenes en una página Web, y los usuarios pueden ver versiones más grandes de las imágenes haciendo clic en un botón o sosteniendo sus cursores sobre las imágenes. Una forma de mostrar imágenes ampliadas de alta calidad es utilizar la misma imagen para tu vista en miniatura y la versión ampliada. Crea este efecto de acercamiento utilizando un truco simple de JavaScript.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu editor HTML y abre un documento HTML.

  2. 2

    Agrega el siguiente código al documento:

    <img id = "Image1" src="suprised1.jpg" height="100" width = "100" onmouseover = "SetSize(this, 'over')" onmouseout = "SetSize(this, 'out')" />

    Esto coloca una imagen en la página web. Toma en cuenta que los valores para ”height” (altura) y “width” (anchura) determinan las dimensiones de la imagen en pixeles. Ajusta estos valores al tamaño de la imagen en miniatura deseado. Por ejemplo, si deseas que tu miniatura tenga 80 pixeles de altura y 90 pixeles de ancho, ajusta la altura a "80" y la anchura a "90". Toma en cuenta que las propiedades "onmouseover" y "onmouseout” pasan el valor de "id" de la imagen a una función de JavaScript llamada "SetSize" (ajustar tamaño).

  3. 3

    Agrega este código JavaScript a la sección de "script" de tu documento.

    var percentIncrease = 1.6;

    La variable "percentIncrease" (porcentaje de incremento) determina el factor de incremento de la imagen. En este ejemplo, el porcentaje es 1,6, y hace que el tamaño de la imagen en miniatura se incremente 1,6 veces. Cambia el valor a las dimensiones que prefieras.

  4. 4

    Coloca el siguiente código debajo de la fase anterior:

    function SetSize(image, action) {

    if (action == "over") { var newHeight = Math.round(image.height * percentIncrease); var newWidth = Math.round(image.width * percentIncrease); } else { var newHeight = Math.round(image.height / percentIncrease); var newWidth = Math.round(image.width / percentIncrease); } image.style.height = newHeight; image.style.width = newWidth; }

    Esta función "SetSize" (tamaño establecido) determina las dimensiones de la imagen y las multiplica por el factor de "percentIncrease" (porcentaje de incremento) cuando el cursor del ratón se mueve sobre la imagen en miniatura. Esto reduce las dimensiones cuando el cursor se mueve lejos de la imagen.

  5. 5

    Guarda el documento y ábrelo en tu navegador para ver la imagen en miniatura.

  6. 6

    Mueve tu cursor sobre la vista en miniatura. El tamaño de la miniatura se incrementa con base en el factor que establezcas en el código. Mueve el cursor lejos de la imagen alargada para que vuelva a su tamaño normal.

Consejos y advertencias

  • Toma en cuenta que la función de JavaScript te permite usar factores de ampliación fraccionarios como 1.6 y 2.7. Cuando elijas un factor de ampliación, selecciona uno que no haga la imagen alargada tan grande que no quepa en la página. Si eso ocurre, los usuarios no podrán mover sus cursores lejos de la imagen para regresarla a su tamaño en miniatura normal.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles