Posts Tagged ‘html area tag coords’

HTML area tag


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
HTML tags HTML tags HTML events HTML events HTML types HTML types

Navigation menu

Attributes:

Attribute

Value

Description
alt text Specifies an alternate text for the area
coords

if shape="rect" then
coords="left,top,right,bottom"

if shape="circ" then
coords="centerx,centery,radius"

if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"

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.

  • _blank – the target URL will open in a new window
  • _self – the target URL will open in the same frame as it was clicked
  • _parent – the target URL will open in the parent frameset
  • _top – the target URL will open in the full body of the window
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

 

Designed for Mytoptutorials.com