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

or providing padding next to content on the page with the use of transparent images.
These are tasks that are better suited to and commonly accomplished with CSS
through the background , border , and padding properties.
Also, from a performance point of view, it is important to remember that the img
element provides a placeholder within the HTML page to an external resource. Since
a request must be made to the web server for each linked resource, a request is made
for the HTML page, and additional requests are needed for each image on the page.
Using CSS, a technique known as CSS sprites , may be used to consolidate a number
of images together in one image for the purposes of reducing server requests. The
images are laid out side-by-side and cropped to show different images from the one
source image. Because this requires only one request as opposed to one for each im-
age, there is a performance improvement to be gained.
So, why would you ever use the img element at all, when so much more flexibility
can be provided by CSS? The answer lies in img 's alt attribute. Since this attribute
is used to represent the image in textual form, it addresses accessibility concerns that
are lost in CSS. The information in an HTML document should still be comprehens-
ible even if its CSS styles are removed, so images that are critical to the presented
information on the page, such as images or figures referred to elsewhere in the text of
the document, should be presented in the img element.
The remaining attributes on the img element are ismap and usemap , which are
both used for image maps, which we'll discuss next.
Image maps
Before the interactive animations and images built in Adobe Flash, which became all
the rage in the late 1990s, the height of interactivity was clickable image maps, with
their coded “hotspots” that linked a user to different pages based on where on the image
the user clicked. There are two varieties of image maps: server-side and client-side. In a
server-side image map, the pixel coordinates of the mouse click are sent to the server as
an x, y coordinate pair. The server can then use that information to determine where on
the image the user clicked and respond with a subsequent action. All that is required to
enable this functionality is to add the Boolean ismap attribute to an img element that
is enclosed in an anchor element ( a ):
<a href="process.php"><img ismap src="map.png" alt=""
/></a>
After clicking the image, the coordinates of where the image was clicked (relative
to the upper-left corner of the image) appear in the URL as a querystring, like pro-