w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



img usemap attribute

The usemap attribute on the img element:

Examples

<imgattribute="value(s)" >Examples
4.usemap=#value_of_name_attribute_of_map_element<img src="blue" alt="blue" usemap="#value">

Video demonstration img usemap attribute

HTML5 img usemap attribute Tutorial

min video details
00:02 video tutorial: usemap attribute on img
00:09 usemap attribute allows you to link an img element to a map element, transforming the regular image into an image map (a client-side image map)
00:16 this image is a regular image (does not have clickable areas) but we will transform it into an image map soon
00:31 adding the usemap attribute to img element
00:42 we will link ⁄ connect this img element to this map element through usemap attribute
00:47 this set of coordinates corresponds to a circle shape
00:54 when we will click anywhere inside that circle, we will be taken to round_zone.php file
00:57 this set of coordinates corresponds to a rectangle shape
01:06 when we will click anywhere inside that rectangle, we will be taken to rectangle_zone.php file
01:10 this set of coordinates corresponds to a polygon shape
01:21 when we will click anywhere inside that polygon, we will be taken to polygon_zone.php file
01:26 we defined 3 clickable areas inside map element, the rest of the image is not clickable, BUT by defining a default shape with no coordinates, any area outside the 3 areas will be clickable too and will take us to treasure_map_history.php file
01:38 completing the process: adding the value to the usemap attribute which is the value of the name attribute of the map element preceded by #
01:53 that's it: our image us now an image map
02:09 the rest of the image is not clickable; let's make it
02:29 the whole image is now clickable
img intro img optional img occurrences img browser display img parents server-side image map (ismap) vs client-side image map (usemap) img syntaximg alt attributeimg ismap attributeimg width, height attributesimg src attributeimg accesskey attributeimg class attributeimg draggable attributeimg hidden attributeimg id attributeimg lang attributeimg style attributeimg tabindex attributeimg title attributeimg translate attribute