TABLES - CSS: Professional Techniques for Modern Layout - page 214

Figure 6-9: The map.

216

With the map, you can start i guring out where you want to place your data. In this case, what
you need is the approximate midpoint of each state. My approach is to open the image up in
an image editor like Photoshop and use it to i gure out the X,Y coordinates of each point,
which I write down in a list. h us:

AL 692 448

AK 210 560

…

WY 330 300

h ese are the points where you'll place each bit of data. But don't stop with just plain pixel
values: h ese need to be converted to percentages of the image's dimensions. h is map is an
1,000 x 700 image. h us, divide each horizontal measure by 1,000 and each vertical measure
by 700 to get:

AL 69.2% 64%

AK 21% 80%

…

WY 33% 42.9%