Description:
The HTML area tag element defines a sector or area in an image map. There are three types of areas: circular, rectangular or poligonal.
Image maps are commonly used toghether with images to specify zones for them, which are usually linked to other documents or resources. These zones are declared with the HTML area element. This way, authors can link, for example, a circular portion of an image to another document.
Differences Between HTML and XHTML:
In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.
Differences Between HTML 4.01 and HTML5:
HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.
Example:
| Code |
|---|
|
<map name="image-map-1" id="image-map-1"> <area href="http://www.mytoptutorials.com/html/html-tags-reference/" alt="HTML tags" shape="circle" coords="50,50,39" /> <area href="http://www.mytoptutorials.com/html/html-tags-reference/" alt="HTML tags" shape="rect" coords="31,49,189,81" /> <area href="http://www.mytoptutorials.com/html/html-events-references/" alt="HTML events" shape="circle" coords="155,165,39" /> <area href="http://www.mytoptutorials.com/html/html-events-references/" alt="HTML events" shape="rect" coords="55,137,155,163" /> <area href="http://www.mytoptutorials.com/html/mime-media-types/" alt="HTML types" shape="circle" coords="75,250,39" /> <area href="http://www.mytoptutorials.com/html/mime-media-types/" alt="HTML types" shape="rect" coords="107,240,153,260" /> </map> <img src="http://www.mytoptutorials.com/html/wp-content/uploads/2013/05/image-map-1-en.png" usemap="#image-map-1" alt="Navigation menu" /> |
Result:
| Result |
|---|
|
|
Attributes:
| Attribute |
Value |
Description |
|---|---|---|
| alt | text | Specifies an alternate text for the area |
| coords |
if shape="rect" then
if shape="circ" then
if shape="poly" then |
Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps |
| href | URL | Specifies the URL of a page or the name of the anchor that the link goes to. |
| nohref | true /false | Excludes an area from the image map |
| shape |
rect rectangle circ circle poly polygon |
Specifies the shape of the image map |
| target |
_blank _parent _self _top |
Where to open the target URL.
|
| type | mime_type | Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL |
Standard Attributes:
| Attribute |
Description |
|---|---|
| accesskey | Access keys (or shortcut keys) |
| class | Document wide identifier |
| dir | Specifies the direction of the text |
| id | Document wide identifier |
| tabindex | Helps determine the tabbing order when the user 'tabs' through the elements on the page. |
| title | Specifies a title to associate with the element. |
| style | Helps to include inline casecadubf style sheet. |
| lang | Sets the language code. |
Event Attributes:
| Attribute |
Description |
|---|---|
| onfocus | Script runs when the element gets focus |
| onblur | Script runs when the element loses focus |
| onclick | Script runs when a mouse click |
| ondblclick | Script runs when a mouse double-click |
| onmousedown | Script runs when mouse button is pressed |
| onmouseup | Script runs when mouse button is released |
| onmouseover | Script runs when mouse pointer moves over an element |
| onmousemove | Script runs when mouse pointer moves |
| onmouseout | Script runs when mouse pointer moves out of an element |
| onkeypress | Script runs when key is pressed and released |
| onkeydown | Script runs when key is pressed |
| onkeyup | Script runs when key is released |
The post HTML area tag appeared first on .