Crear enlaces de imagen y mapas de imagen

• Abril 20, 2024

La respuesta de esta semana es en respuesta a una pregunta del lector: "¿Puede explicar cómo hacer que un enlace de imagen a una página en HTML". Hay un par de técnicas diferentes que puede usar para imágenes vinculadas. Una es vincular toda la imagen con su HTML y la otra es hacer un mapa de imagen, donde diferentes partes de la misma imagen están vinculadas a diferentes ubicaciones.

Imagen vinculada en HTML

Vincular una pequeña imagen o icono es muy simple, todo lo que tiene que hacer es colocar el enlace de su imagen dentro del hipervínculo de la siguiente manera:



Todo lo que hice aquí fue encerrar la imagen dentro del html para el enlace. Esta es la forma más fácil y efectiva de vincular una imagen pequeña y, a menudo, se realiza con viñetas personalizadas, íconos, etc. Pero, ¿qué sucede si desea que una imagen grande se vincule a varios lugares diferentes? Aquí es donde el corte de imágenes es útil.

Corte de imagen en Photoshop

Esto es muy fácil de lograr en Photoshop. Debe usar una imagen que no sea demasiado complicada, porque desea que sus usuarios puedan ver claramente dónde hacer clic en la imagen. También debe asegurarse de que sus usuarios comprendan que deben hacer clic dentro de la imagen para llegar a su destino. Desarrolle mapas de imágenes cuidadosamente con su usuario en mente. Tenga en cuenta que los mapas de imágenes no suelen ser tan amigables para los motores de búsqueda como el texto de una página, sin embargo, el uso adecuado de las etiquetas alt dentro de los cortes de imagen puede ayudar con esto.

Una vez que se crea su imagen, el siguiente paso es "cortar" su imagen. El icono de la herramienta de corte parece un pequeño cuchillo exacto. Está cerca de la parte superior de la barra de herramientas y se encuentra debajo de la herramienta de recorte: si hace clic en el icono "recortar", aparecerán las herramientas de corte y selector de corte.

Seleccione la herramienta de corte, mantenga presionada la tecla izquierda del mouse y arrastre cuidadosamente el corte hacia donde lo desee y luego suéltelo. Continúa y continúa cortando toda la imagen. Debe haber un corte alrededor de cada área de la imagen que desea vincular a otra página. Cualquier área blanca grande puede ser una rebanada.

Después de que su imagen esté completamente dividida, el siguiente paso es usar la herramienta "selección de corte", haga clic en cada corte y desde allí elija el tipo de imagen "imagen". Debajo de eso, complete la url de dónde desea que dirija este segmento seguido del campo de etiqueta alt en la parte inferior. Los otros campos no son necesarios para el mapeo simple de imágenes. Muévase a través de cada corte de la misma manera hasta que se trace la imagen completa.

Una vez que haya completado su imagen completa, utilizará la opción "guardar para web y dispositivos". Si hace clic en "Archivo" en la parte superior y mira hacia abajo debajo de las opciones de guardado típicas, verá la opción para guardar para web y dispositivos. Seleccione esta opción y se abrirá un cuadro de diálogo donde podrá obtener una vista previa de cómo se verá su imagen. Si está satisfecho con él, presione el botón Guardar y se abrirá otro cuadro de diálogo. Asegúrese de que la segunda opción dice "guardar imágenes y HTML", luego guarde su trabajo.

Vaya a su carpeta donde guardó el documento HTML y ábralo. Puede copiar y pegar este código en su propio archivo HTML. Por lo general, este HTML será un poco descuidado. Si eres experto en HTML, puedes limpiarlo a tu gusto, pero debería funcionar bien como está. Asegúrese, como siempre, de que sus archivos de imagen, etc. están en las ubicaciones correctas; de lo contrario, su imagen no se mostrará.

Instrucciones De Vídeo: 13. CÓMO CREAR LINKS DENTRO DE UNA IMAGEN | MAPAS DE IMAGEN | Curso HTML 5 Fácil (Abril 2024).