<aside> ℹ️ Atención: En cualquier momento puede hacer clic sobre las imágenes para verlas en forma aumentada

</aside>

Esta ayuda le enseñará a crear links que funcionen cuando hace clic en una imagen

<aside> ❌

Atención

Esta ayuda ya no es necesaria. Use la funcion disponible desde el editor de sitio web para agregar links en modo grafico. Clic para ver la ayuda

</aside>

Insertar links en imágenes mediante HTML

Para agregar un link (enlace o hipervínculo) a una imagen, en la vista Edicion de contenidos debe en forma obligatoria entrar en la vista de Edicion HTML

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/a5ffef53-edd8-468a-b96a-cb353a7d7103/crear-links-imagen-1.png

La Edicion HTML tiene cierto nivel de complejidad y es recomendado solo para expertos.

<aside> ℹ️ Mapaprop no brinda soporte para corregir los errores que Ud pueda cometer editando html, por lo tanto recomendamos usarlo con discreción o solicitarle a un experto

</aside>

Para lograr insertar un vinculo en una imagen siga estos pasos:

1- Inserte una imagen desde la Biblioteca de imagenes

Inserte imágenes desde la Biblioteca de imagenes en el Edicion de contenidos de la página

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/83b249b2-26ee-41ba-9cce-5c539c818d6d/1-seleccionar.png

2- Presione el boton Edicion HTML

Ingrese a la vista de edición HTML para ver el código de la página

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/502ae9c2-5816-4890-9f15-23886a7de0e0/3-editar-imagenes-html.png

3- Estudie el código HTML y aisle las etiquetas <img .... jpg">

El html se compone de "etiquetas". Las etiquetas de las imagenes comienzan con <img y terminan con >

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/98321330-5c1e-4644-84a5-04caeb3fc7a4/crear-links-imagen-3.png

Etiqueta html para una imagen

<img src="<https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg>">

4- Agregue el código HTML para asignar un link

Ahora, agregue el código para crear el link. Tenga en cuenta que Ud debe conocer previamente la url de dicho enlace.

Etiqueta html para un link en una imagen

<a href="/pagina/emprendimiento-x"><img src="<https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg>"></a>

En la mayoría de los casos, es necesario ubicar las imágenes en forma horizontal, para ello puede introducir un estilo css dentro de la imagen, por ejemplo

agregue un estilo css a la imagen

<img style="float:left; margin-right:10px;" src="xxxxx.jpg">

Este estilo indica que la imagen debe flotar a la izquierda (float:left;), y que ademas debe tener un margen de 10 pixeles a la derecha (margin-right: 10px;)

La vista final de una correcta edición html sería la siguiente

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/2c6e6ac9-48ab-4107-8491-5c8cc136f0d9/crear-links-imagen-4.png

5- Guarde la página

Ahora la página se verá con las imágenes ordenadas y cada una de ellas contendrá el enlace (link) que Ud asignó.

https://prod-files-secure.s3.us-west-2.amazonaws.com/f9379137-2e11-42d9-823d-743b06b351a6/41d742fa-a8e2-4304-bdea-97011376b415/crear-links-imagen-5.png

Si lo desea puede tambien asignar un margen al pie de la foto, incluyendo el estilo "margin-bottom:10px;"

agregue un estilo css a la imagen

<img style="float:left; margin-right:10px; margin-bottom:10px;" src="xxxxx.jpg">

Soporte


⚠ Si tiene dificultades con esta ayuda, puede reportar un problema haciendo clic aquí

Mapaprop.com | Todos los derechos reservados | Síganos en Twitter