Area

The HTML <area> tag, implemented in Ruby.

Parameters

This component can take various optional configuration params, as well as all the canonical HTML global attributes like id or class.

It is meant to be used within the <map> component.

alt (optional)

Expects a string that specifies an alternate text for the <area> tag. Required if the href attribute is present.

coords (optional)

Expects an array of integers that define the <area>'s coordinates. For more details, see the official documentation.

download (optional)

Expects a string to specify the target that will be downloaded when a user clicks on the hyperlink.

href (optional)

Expects a string to specify the hyperlink target for the area.

hreflang (optional)

Expects a string to specify the language of the target URL.

media (optional)

Expects a string to specify what media/device the target URL is optimized for.

rel (optional)

Expects a string to specify the relationship between the current document and the target URL.

shape (optional)

Expects a string to specify the shape of the area: Default, rect, circle, poly.

target (optional)

Expects a string to specify where to open the target URL.

type (optional)

Expects a string to specify the media type of the target URL.

Examples

Example 1 - Basic usage

img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"

map name: 'newmap' do
  area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
  area shape: 'rect', coords: [0,0,100,100], href: 'second.htm', alt: 'Second'
  area shape: 'rect', coords: [0,0,100,100], href: 'third.htm', alt: 'Third'
end

returns

<img src="matestack-logo.png" alt="otherlogo" width="500" height="300" usemap="#newmap">

<map name="newmap">
   <area shape="rect" coords="0,0,100,100" href="first.htm" alt="First">
   <area shape="rect" coords="100,100,200,200" href="second.htm" alt="Second">
   <area shape="rect" coords="200,200,300,300" href="third.htm" alt="Third">
</map>