Ejercicio avanzado mapa de imagen html

Ejercicio avanzado mapa de imagen html

En una entrada anterior hemos resuelto un ejercicio sencillo muy parecido al que se desarrolla en esta página.

En esta entrada vamos a complicarlo un poco definiendo zonas inertes en el interior de otras ya definidas.

Pasemos al ejercicio:

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 negro delimitado por los puntos 95,44 y 128,257 envía al usuario a https://francesricart.com/tutorial-html cuando se pulsa. En su interior tiene un área definido por los puntos 104,56 y 117,244 que es inerte cuando es pulsado, generando un hueco.
  • El área negro delimitado por los puntos 128,44 y 235,74 envía al usuario a https://francesricart.com/tutorial-css cuando se pulsa. En su interior tiene un área definido por los puntos 128,56 y 226,65 que es inerte cuando es pulsado, generando un hueco.
  • El área negro delimitado por los puntos 128,144 y 211,156 envía al usuario a https://francesricart.com/tutorial-javascript cuando se pulsa. En su interior tiene un área definido por los puntos 128,144 y 211,156 que es inerte cuando es pulsado, generando un hueco.
Ejercicio avanzado mapa de imagen html 1

Solución del ejercicio

La imagen debe usar el atributo usemap.

El mapa de imagen debe estar nombrado con el atributo name.

En este caso debemos vigilar con el orden en el que indicamos las areas.  Primero escribimos las áreas inertes y a continuación las áreas que si envían el internauta a algún lugar.

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-avanzado.jpg" alt="letra F" usemap="#f">
	<map name="f">

		<area shape="rect" coords="104,56,117,244" href="#" alt="area inerte">
		<area shape="rect" coords="95,44,128,257" href="https://francescricart.com/tutorial-html" alt="tutorial html" target="_blank">
		
		<area shape="rect" coords="128,56,226,65" href="#" alt="area inerte">
		<area shape="rect" coords="128,44,235,74" href="https://francescricart.com/tutorial-css" alt="" target="_blank">

		<area shape="rect" coords="128,144,211,156" href="#" alt="area inerte">
		<area shape="rect" coords="128,138,220,165" href="https://francescricart.com/tutorial-javascript" alt="" target="_blank">
	</map>
	
</body>
</html>

¡Hola!

Querido lector,

Te animo a hacer el mismo ejercicio pero esta vez con la primera letra de tu nombre.

¡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. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.