<area> Archives - Lena Design

The HTML alt attribute gives alternative information for an image.

You can use the alt attribute with the following elements:

<input> (only can be used with <input type=”image”>)

Area Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

Img Example:

<img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg" alt="avatar" width="320" height="240">

Output:

Input Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML Attributes

HTML Form Elements

HTML SVG

The HTML <map> element is used to specify an image map. An image map is an image with clickable areas.

The HTML <map> tag contains a number of HTML <area> tags, that specify the clickable areas in the image map.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

Note: The usemap attribute in <img> is linked with the <map> element’s name attribute, and creates a connection between the image and the map.

The HTML <area> element specifies an area inside an image map.

Attributes:

alt (value- text) -defines an alternate text for the area.

coords (value- coordinates) – defines the coordinates of the area.

x1,y1,x2,y2 – defines the coordinates of the top-left and bottom-right corner (shape=”rect”).

x,y,radius – defines the coordinates of the circle center and the radius (shape=”circle”).

x1,y1,x2,y2,..,xn,yn – defines the coordinates of the edges of the polygon.

download (value- filename) – defines that the target will be downloaded when a user clicks on the hyperlink.

href (value- URL) – defines the hyperlink target for the area.

media (value- media query) – defines what device the target URL is optimized for.

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send with the link.

rel (value- alternate/ author/ bookmark/ help/ license/ next/ nofollow/ noreferrer/ prefetch/ prev/ search/ tag) – defines the relationship between the current document and the target URL.

shape (value- default/ rect/ circle/ poly) – defines the shape of the area.

target (value- _blank/ _parent/ _self/ _top/ framename) – defines where to open the target URL.

type (value- media_type) – defines the media type of the target URL.

Enjoy coding!