Create an Image Montage and a Corresponding HTML Area Map

 85 montage_width  = (THUMBNAIL_WIDTH  * THUMBNAIL_COLUMNS) + YEAR_WIDTH
 86 montage_height = THUMBNAIL_HEIGHT * THUMBNAIL_ROWS
 87 montage_img    = Image.new('RGB', (montage_width, montage_height))
 88 montage_draw   = ImageDraw.Draw(montage_img)
 89 
 90 print 'Thumbnails: %dx%d' % (THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
 91 print 'Cols Rows : %dx%d' % (THUMBNAIL_COLUMNS, THUMBNAIL_ROWS)
 92 print 'Size      : %dx%d' % (montage_width, montage_height)
 93 
 94 img_tag  = '<img src="%s" width="%d" height="%d" alt="%s" border="0" usemap="#%s" />\n'
 95 map_tag  = '<map id="%s" name="%s">\n'
 96 area_tag = '  <area shape="rect" '         \
 97                    'coords="%d,%d,%d,%d" ' \
 98                    'href="%s" '            \
 99                    'onmouseover="javascript:cmap_show_image(\'%s\', \'%s\', %d, \'%s\');"/>\n'
100 
101 # Create html file.
102 html_output = open(MONTAGE_HTML, 'w')
103 
104 # Insert javascript.
105 html_output.write('<script language="JavaScript">\n');
106 html_output.write(open(MONTAGE_JS).read() % (len(covers), image_basename))
107 html_output.write('</script>\n\n');
108 
109 # Add image tag for cover montage.
110 html_output.write('<table border="0"><tr><td>\n')
111 html_output.write(img_tag % (montage_url, montage_width, montage_height,
112                              MONTAGE_IMG_ALT, MONTAGE_MAP_ID))
113 html_output.write(map_tag % (MONTAGE_MAP_ID, MONTAGE_MAP_ID))
114 
115 year   = 1994
116 column = FIRST_ROW_BLANKS
117 xpos   = YEAR_WIDTH + (THUMBNAIL_WIDTH * column)
118 ypos   = 0
119 for ix, cover in enumerate(covers):
120     inum = ix + 1
121 
122     # Load cover image, resize it and paste it into the montage.
123     img   = Image.open(cover)
124     img   = img.resize((THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT))
125     xpos2 = xpos + THUMBNAIL_WIDTH
126     ypos2 = ypos + THUMBNAIL_HEIGHT
127     box = (xpos, ypos, xpos2, ypos2)
128     montage_img.paste(img, box)
129 
130     # Add area tag for this image to the map.
131     imonth, iyear = convert_issue_to_month_year(inum)
132     ititle        = '#%d - %s, %s' % (inum, imonth, iyear)
133     ilink         = AREA_HREF % inum
134     html_output.write(area_tag % (xpos, ypos, xpos2, ypos2,
135                                   ilink,
136                                   COVER_IMG_ID, MONTAGE_MAP_ID, inum, ititle))
137 
138     column += 1
139     if ix == 1  or  ix == 2:
140         xpos   += THUMBNAIL_WIDTH
141         column += 1
142 
143     if column == THUMBNAIL_COLUMNS  or  ix == len(covers)-1:
144         # Add the row label to the montage.
145         if YEAR_WIDTH > 0:
146             ystr = '%d' % year
147             ysz  = montage_draw.textsize(ystr)
148             h    = ysz[1]
149             y    = ypos + ((THUMBNAIL_HEIGHT - h + h // 2) // 2)
150             montage_draw.text((4, y), ystr)
151             year += 1
152 
153         xpos    = YEAR_WIDTH
154         ypos   += THUMBNAIL_HEIGHT
155         column  = 0
156     else:
157         xpos += THUMBNAIL_WIDTH
158 
159 montage_img.save(MONTAGE_JPG, 'JPEG')
160 
161 
162 # Finish html.
163 html_output.write('</map>\n')
164 
165 html_output.write('</td>\n')
166 html_output.write('<td valign="center">\n')
167 img_tag = '<img src="%s%03d.jpg" id="%s"  border="0" alt="%s" />\n'
168 html_output.write(img_tag % (image_basename, len(covers) , COVER_IMG_ID, MONTAGE_IMG_ALT))
169 html_output.write('</tr></table>\n')
170 
171 html_output.close()

// The percent format fields are filled in by cmap.py
var cmap_n_images        = %d;
var cmap_image_base      = '%s';
var cmap_image_urls      = Array();
var cmap_image_objs      = Array();

function cmap_show_image(imgid, mapid, inum, ititle)
{
    var img = document.getElementById(imgid);
    var map = document.getElementById(mapid);
    var i;
    var j;

    if ( img  &&  map ) {
        if ( cmap_image_urls.length == 0 ) {
            // Create image urls and image objects.
            for ( i = 0; i < cmap_n_images; i++ ) {
                j = i + 1;
                if      ( j < 10  ) zero = '00';
                else if ( j < 100 ) zero = '0';
                else                zero = '';
                cmap_image_urls[i] = cmap_image_base + zero + j + '.jpg';
                cmap_image_objs[i] = new Image();
            }
        }

        i = inum - 1;
        if ( !cmap_image_objs[i].src ) {
            cmap_image_objs[i].src = cmap_image_urls[i];
        }
        img.src   = cmap_image_objs[i].src;
        map.title = ititle
    }
}