@harish 424
Image Maps in HTML
2021-11-17 16:14 · 5 min read
Image Maps in HTML
An image maps is an image with clickable areas that usually act as hyperlinks
The image is defined by the <img> tag, and the map is defined by a <map> tag with <area> tags to denote each clickable area. Use the usemap and name attributes to bind the image and the map
Image Maps in HTML
| Tag/Attribute | Value |
|---|---|
| <img> | Below are the image map-specific attributes to use with <img>. Regular <img> attributes apply |
| usemap | The name of the map with a hash symbol prepended to it. For example, for a map with name="map", the image should have usemap="#map". |
| <map> name | The name of the map to identify it. To be used with the image's usemap attribute. |
| <area> | Below are <area>-specific attributes. When href is specified, making the <area> a link, <area> also supports all of the attributes of the anchor tag (<a>) except ping |
| alt | The alternate text to display if images are not supported. This is only necessary if href is also set on the <area>. |
| coords | The coordinates outlining the selectable area. When shape="polygon", this should be set to a list of "x, y" pairs separated by commas (i.e., shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..."). When shape="rectangle", this should be set to left, top, right, bottom. When shape="circle", this should be set to centerX, centerY, radius. |
| href | The URL of the hyperlink, if specified. If it is omitted, then the <area> will not represent a hyperlink |
| shape | The shape of the <area>. Can be set to default to select the entire image (no coords attribute necessary), circle or circ for a circle, rectangle or rect for a rectangle, and polygon or poly for a polygonal area specified by corner points. |
Introduction to Image Maps
Basic Example:
To create an image map so that each of the shapes in the image below are clickable:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
TAGS:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
