Multimedia: Video, Audio, and Embedded Media - HTML5 Mastery: Semantics, Standards, and Styling - page 190

cess.php?54,77 . (This example would mean the click occurred 54 pixels from the
left edge and 77 pixels from the top edge of the image.) A server-side script could then
access the coordinates and use them against a lookup table of coordinate areas to de-
termine what action (if any) should happen.
___________
3 As you will see in Chapter 6 , CSS3 isn't one specification but several. However, like how
“HTML5” is often used as an umbrella term to cover a family of related technologies, “CSS3”
covers a number of different but related specifications. In the case of multiple backgrounds, the
actual specification is “CSS Backgrounds and Borders Module Level 3.”
A client-side image map works on the same principle as a server-side image map,
but the hotspot areas are defined at the client (the web browser) instead of the server.
This is a preferable method because the hotspot coordinates can be made accessible to
people browsing that are unable to view the image, and they offer immediate feedback
as to whether users are clicking an active region. However, compared to server-side im-
age maps, the markup required is more involved. There are two distinct parts: the im-
age element ( img ) and an associated map element, neither of which is nested within the
other. The map element is a container element with a name attribute, which is referen-
ced by the image element's usemap attribute to create an association between the im-
age and the image map area coordinate data. The actual image map hotspot coordinates
are defined inside the map element through any number of self-closing area elements.
Here's an example:
<img src="banner.png" alt="" width="300" height="272"
usemap="#bannermap" />
<map name="bannermap">
<area shape="circle" coords="52,76,39" href="/
about.html" alt="About" />
<area shape="rect" coords="120,56,187,102"
href="/contact.html" alt="Contact" />
<area shape="poly" coord-
s="265,148,221,99,221,42,266,24" href="/portfolio.html"
alt="Portfolio" />
<area shape="default" href="/index.html"

alt="Homepage" />
</map>
As you can see in the previous example, the area elements use a shape attribute to
determine the shape of the hotspot area and a coords attribute to stake out the dimen-