The Molecular Universe

Expanding Images Using Javascript

The structure of the enzyme lysozyme.

As shown on the left, I spent a little time today working out how to make the images on this site expandable. Here is what I came up with.

To do this, I put an onlick javascript handle on to the img element for a particular image, likel this:

<img src="lysozyme_scale.gif" alt="(Lysozyme)" onclick="toggle(this)" />

The toggle function uses the supplied image file name to determine if it should display the 'full' image or the scaled down image (which I call lysozyme_scale.gif in this case). Here is the javascript:

function toggle(image) {
    if (image.src.match("scale")) {
        image.src = image.src.replace(/_scale/,"");
    } else {
        var ext = image.src.slice(-4);
        image.src = image.src.slice(0,-4);
        image.src = image.src.concat("_scale");
        image.src = image.src.concat(ext);
    }
}

...and the javascript file which contains this function has been added to the head section of every page which needs to display images.

<script type="text/javascript" src="./styles/scripts.js"></script>

To insure that each image provides information to the user about clickability - I put each image element into <a href="#"> </a> pair.

Overall this gives clickable images which expand to provide the user with additional visual information. This is convenient and the necessary modifications are small. One simply needs to follow the naming convention of filename_scale.png for the smaller image. So this seems to be both useful for users and convenient for the website maintainer.