Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏
Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.
Con los mapas de imagen se pueden añadir zonas clicables sobre una imagen.
La etiqueta <map> define un mapa de imagen con áreas clicables.
En el ejemplo de abajo puedes clicar sobre la piña, una calabaza y el ordenador.
Necesitamos una imagen y una etiqueta <map> que contiene la información de las áreas clicables.
La imagen se inserta con un <img>. Y le añadimos el atributo usemap.
<img src="imagen.jpg" alt="Imagen" usemap="#map">
El valor del usemap empieza con un # seguido del name del mapa que queramos vincular.
Es un elemento <map> y se vincula a través del atributo name a la imagen.
<map name="map">
El elemento <map> se puede insertar en cualquier parte del documento, no afecta el orden.
Dentro de la etiqueta <map> añadimos las áreas clicables usando la etiqueta <area>
Tenemos diferentes formas:
Hay que definir las coordenadas donde estará el área clicable.
Las coordenadas van de dos en dos valores, para el eje x y el eje y. Y se cuenta en pixeles.
En el ejemplo de arriba, la primera área tiene 210 pixeles de margen desde la izquierda, y 0 pixeles de margen desde arriba. Y 400 pixeles desde la izquierda y 160 desde arriba.
<area shape="rect" coords="210, 0, 400, 160">
Tan solo tienen una coordenada, y el tercer parámetro es el radio del circulo.
<area shape="circle" coords="100, 215, 35">
Se le puede añadir el atributo href para definir el destino al que va el enlace.
También un área puede llamar a una función de JavaScript usando el onclick.
<area shape="rect" coords="210, 0, 400, 160" alt="Computadora" onclick="clickFunction()">
Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.
![Curso de HTML desde cero [completo]](https://assets-global.website-files.com/635a453bdfb49358830950bd/635a463a9c53141574eedda6_template_imagen_curso.jpg)
