Cómo Ampliar Una Imagen Al Hacer Clic

Tabla de contenido:

Cómo Ampliar Una Imagen Al Hacer Clic
Cómo Ampliar Una Imagen Al Hacer Clic

Video: Cómo Ampliar Una Imagen Al Hacer Clic

Video: Cómo Ampliar Una Imagen Al Hacer Clic
Video: Cómo ampliar fácilmente las imágenes en WordPress. 2024, Mayo
Anonim

Hay ocasiones en las que es necesario colocar una vista previa de una imagen en la página de un sitio web. La imagen expuesta en el modo de vista previa se amplía cuando se presiona, y el usuario tiene la oportunidad de ver todos los detalles de su interés. Hay varias formas de realizar esta vista previa.

Cómo ampliar una imagen al hacer clic
Cómo ampliar una imagen al hacer clic

Instrucciones

Paso 1

Sube la imagen a un sitio de alojamiento de fotos de terceros e inserta el enlace que desees en tu sitio web. Vaya a la página del intercambiador que más le convenga y, utilizando los botones correspondientes, indique de dónde se descargará la imagen: de Internet o de su ordenador. En el primer caso, copie el enlace a la imagen de la barra de direcciones en la ventana del navegador y péguelo en el campo designado en el alojamiento de fotos. En el segundo caso, haga clic en el botón "Examinar" y especifique el directorio donde se encuentra su imagen en su computadora. Haga clic en el botón "Descargar" y espere a que se complete la operación.

Paso 2

Para que su imagen sea ampliada con un clic del mouse, copie el enlace ubicado en el campo "Vista previa" ("Vista previa", "Haga clic para ampliar") y péguelo en su recurso. Como alternativa a tales leyendas, se pueden dar diferentes opciones para el tamaño de la imagen. Por ejemplo, para el tamaño completo de la imagen, el valor puede ser 600x450 y para la vista previa, 200x150.

Paso 3

Alternativamente, abra una página en su sitio para editarla. En el grupo "Imágenes" del panel de opciones, haga clic en el botón "Examinar" y especifique la ruta a la imagen guardada en su computadora. Si desea cargar varias imágenes a la vez, presione el número requerido de veces en el icono [+] y repita la operación para cada imagen. Para cada imagen cargada, se generará un código ($ IMAGE1 $, $ IMAGE2 $ y así sucesivamente). Aparecerá a la derecha del botón "Examinar" en un campo separado, pegue este código en el lugar deseado de la página.

Paso 4

A la derecha del campo con el código, los campos con la resolución de imagen en forma de vista previa estarán disponibles para su edición. Especifique qué tan altas y anchas deben ser sus imágenes en el modo de vista previa. Si lo desea, puede modificar adicionalmente los datos en el grupo "Dimensiones máximas de la imagen completa". Haga clic en el botón "Guardar". Las vistas previas colocadas de esta manera se agrandan cuando se hace clic en una nueva pestaña. Si desea ampliar la imagen sin salir de la página, inserte el script apropiado en el sitio.

Recomendado: