ImagesMany of the pictures on the site start off as photographs that are much bigger and better definition than can be seen on a compressed version only 500 pixels wide. On the site the people in group photos are hardly recognisable. To show these past members more clearly without resorting to huge images that need to be scrolled off the screen you can add zoomable images that retain identifying name maps. 
Let's dive into the HTML that makes dynamic use of the style sheets and JavaScript.
<div class="zoom" style="height:300px;"> The "zoom" class of the outer div layer has the overflow hidden. When the image inside it becomes bigger than the dimensions of the div layer only the part within the div dimensions will be visible. A big picture seen through a small hole. Open a div positionable layer. The "zoom" class has a default width of 500 pixels so only the style="height:300px;" needs to be specified in the element style. The picture image needs to be positioned absolutely or else the JavaScript would not be able to reposition it. I have used an element style again rather than define a class for one property. This is going to be a big image taking time to open. The image needs to be the full size it is going to be zoomed to. eg a 2x zoom needs an image 1000px X 600px. Specify the size that the image is squeezed into when it first opens with the width and height attributes. The onclick="zsize(this,2,event)" event operates on 'this' image and magnifies it by the figure 2 in this example. More events are added. onMousemove="movezwin(this,2)" traces the position of the pointer as it moves across the main photo and calculates where to place the outline of the zoom window so the viewer knows what they will get. onMouseout="clearzwin()" makes the window trace invisible as the pointer leaves the main photo. The second image is the magnifying glass symbol that indicates the photo can be enlarged. The glass class sets up a size and default position 10 pixels down and in from the top left. Fine tune the position of the glass by over-ruling the location using a style definition inside the HTML element as shown here. Position the glass where it will not cover anyone. The onClick="zglass(this,2)" is another quick and dirty bit because it does not operate on 'this' image but the one before it. So put the tags in the order shown! Oh cor blimey, another JavaScript include. makezwin() is a snippet to save writing HTML to put in the image lines that show the zoom rectangle and an indication of the zoom ratio. People in the photo are mapped as usual and the map is named - in this case "zmap". Remember the name! Here is a typical area tag in the zoom map.
<area class="zmap" Compare that with areas we defined prevously and the only addition is the class="zmap". The area class is given the same identification as the map name so that the JavaScript can find the areas that also need to be magnified with the image. (Quite quick and very dirty!) Publish and be damnedSummaryThe zoom feature is site specific and depends on JavaScript and cascading style sheets. Group photos with a magnifying glass can be made larger. Magnification is at a fixed ratio. The larger image takes longer to open. |