05 Nov Ejercicio sobre mapas de imágenes html
Los mapas de imágenes son un vestigio del pasado que se sigue explicando a día de hoy en los cursos de web.
Con la llegada de la web responsive han dejado de tener mucho sentido pero eso no significa que dejen de tener interés académico.
Como el saber no ocupa lugar en este ejercicio vamos a practicar el concepto de mapas de imágenes de html.
Leer esta entrada te ayudará a repasar los conceptos clave.
Enunciado
A partir de la imagen que podrás descargar a continuación genera un mapa de imagen según las siguientes especificaciones:
- El área magenta púrpura está delimitada por los puntos 105,95 y 125,207. Cuando se pulsa envía al usuario a https://francesricart.com/tutorial-html.
- El área verde oscuro está delimitada por los puntos 126,95 y 215,117. Cuando se pulsa envía al usuario a https://francesricart.com/tutorial-css.
- El área verde azul claro está delimitada por los puntos 128,140 y 215,160. Cuando se pulsa envía al usuario a https://francesricart.com/tutorial-javascript.
Solución del ejercicio
La imagen debe usar el atributo usemap.
El mapa de imagen debe estar nombrado con el atributo name. (lo cuál es un poco extraño porqué el atributo name está deprecated para el uso de anclas web)
El código que resuelve queda según se muestra.
Es importante que si copias y pegas recuerdes poner la imagen en la misma carpeta dónde almacenes el documento web.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="https://francesricart.com"
<title>Ejercio mapa de imagenes</title>
</head>
<body>
<img src="letra-f.jpg" alt="letra F" usemap="#f">
<map name="f">
<area shape="rect" coords="105,95,125,207" href="https://francescricart.com/tutorial-html" alt="tutorial html" target="_blank">
<area shape="rect" coords="126,95,215,117" href="https://francescricart.com/tutorial-css" alt="" target="_blank">
<area shape="rect" coords="128,140,215,160" href="https://francescricart.com/tutorial-javascript" alt="" target="_blank">
</map>
</body>
</html>¡Hola!
Querido lector,
Quizá lo más complicado sea encontrar las coordenadas de cada punto, pero en este ejercicio te lo daba resuelto.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Puntuación media 5 / 5. Votos: 1
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Ejercicio nivel básico sobre tablas html. Uso de rowspan y colspan. Incluye solución.
Aquí encontrarás etiquetas y atributos html obsoletos que deberías borrar de tu mente y mantener únicamente a modo de consulta. ¡Qué horror>
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
No hay comentarios