Issue link: https://read.uberflip.com/i/1146286
CSS Sprites
|
11
No Image Map
http://stevesouders.com/hpws/imagemap-no.php
Image Map
http://stevesouders.com/hpws/imagemap.php
When using Internet Explorer 6.0 over DSL (~900 Kbps), the image map retrieval
was 56% faster than the retrieval for the navbar with separate images for each hyper-
link (354 milliseconds versus 799 milliseconds). That's because the image map has
four fewer HTTP requests.
There are two types of image maps. Server-side image maps submit all clicks to the
same destination URL, passing along the x,y coordinates of where the user clicked.
The web application maps the x,y coordinates to the appropriate action. Client-side
image maps are more typical because they map the user's click to an action without
requiring a backend application. The mapping is achieved via HTML's
MAP tag. The
HTML for converting the navbar in Figure 1-1 to an image map shows how the
MAP
tag is used:
There are drawbacks to using image maps. Defining the area coordinates of the
image map, if done manually, is tedious and error-prone, and it is next to impossible
for any shape other than rectangles. Creating image maps via DHTML won't work in
Internet Explorer.
If you're currently using multiple images in a navbar or other hyperlinks, switching
to an image map is an easy way to speed up your page.
CSS Sprites
Like image maps, CSS sprites allow you to combine images, but they're much more
flexible. The concept reminds me of a Ouija board, where the planchette (the viewer
that all participants hold on to) moves around the board stopping over different let-
ters. To use CSS sprites, multiple images are combined into a single image, similar to
the one shown in Figure 1-2. This is the "Ouija board."
Figure 1-1. Image map candidate