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 |