- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <area> Tag
HTML <area> tag specifies the areas of the image, mapping that can be clicked on or are active areas that are linked to by hyperlinks. It will carry out some action, such as open a new image or URL.
Using multiple <area> elements in a single <map> element, different areas inside an image map can be hyperlinked to different destinations. The (necessary) attributes shape and coords are used to define the <area> element. The area's shape, such as a polygon, rectangle, circle, or square, is specified by the shape attribute. The coords attribute defines the coordinates of different regions inside the image.
Syntax
<area shape="" coords="" href="">
Attribute
HTML area tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
alt | text | Specifies an alternate text for the area. |
coords | coordinates | Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps. |
download | filename | Specifies that the target gets downloaded when hyperlink is clicked by user. |
href | URL | Specifies the URL of a page or the name of the anchor that the link goes to. |
hreflang | language_code | Specifies the language of the target URL. |
media | media query | Specifies media/device the target URL is optimized for. |
nohref | true/false | Excludes an area from the image map |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Specifies relationship between the current document and the target URL |
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. |
Examples of HTML area Tag
Bellow examples will illustrate the usage of area tag. Where, when and how to use it to define area and how we can manupulate area element using CSS.
Area Tag to map Image
In the following example, we will mark poly, rect, and circle area on the image using area tag. Where the shapes poly, rect, and circle will be clickable and will be redirected to the tutorials.
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank"> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank"> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank"> </map> </body> </html>
Area Tag on Image to Zoomin
In this example we have mapped an image with rect when you hover on the invisible rect the image will zoomin and if your cursor moveout of that rect the image will be go back to it's normla form.
<!DOCTYPE html> <html> <head> <style> #myImage { width: 500px; height: 300px; transition: transform 0.25s ease; } #myImage.zoomed { transform: scale(2); } </style> <script> function zoomIn() { document.getElementById('myImage').classList.add('zoomed'); } function zoomOut() { document.getElementById('myImage').classList.remove('zoomed'); } </script> </head> <body> <img id="myImage" src="/html/images/html-mini-logo.jpg" usemap="#image-map"> <map name="image-map"> <area target="" alt="Zoom Area" title="Zoom Area" href="#" coords="34,44,270,350" shape="rect" onmouseover="zoomIn()" onmouseout="zoomOut()"> </map> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
area | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google