Example of image resize

The first image, below, changes size if you hold the mouse button down on it, and reverts to its original size when you let the mouse key up.
The second image resizes on a roll-over. How to do it is described below.

Hitman tried 'death by chocolate'

press and hold mouse button to enlarge
Press and hold mouse button to enlarge Sir William (left) tracked down the chocolate poisoner Tatam. A 1920s hitman tried to assassinate a senior policeman by sending him poisoned chocolates, records released by the National Archives have shown. Walter Tatam laced walnut whip chocolates with weedkiller in a plot to kill Metropolitan Police commissioner Brigadier-General Sir William Horwood.
Sir William thought the chocolates were a gift from his daughter Beryl and ate them - but survived the poisoning. He launched an investigation which eventually lead to Tatam's conviction.

'Doped'

Sir William had eaten the sweets - which arrived in a package at his office in November 1922 - after a hearty lunch of pork and apple sauce, bread and butter pudding and Guinness, the records showed. Within minutes of eating them, he was in agony, and called for a glass of brandy to help control the pain. His assistant Edith Drysdale insisted his condition had been caused by a musty walnut, but the police chief suspected foul play. He inspected the package the poisoned chocolates had come in with his magnifying glass. When he realised he may have been deliberately poisoned he said: "My God. Perhaps I have been doped!"

'Doped'

uni logo Sir William had eaten the sweets - which arrived in a package at his office in November 1922 - after a hearty lunch of pork and apple sauce, bread and butter pudding and Guinness, the records showed. Within minutes of eating them, he was in agony, and called for a glass of brandy to help control the pain. His assistant Edith Drysdale insisted his condition had been caused by a musty walnut, but the police chief suspected foul play. He inspected the package the poisoned chocolates had come in with his magnifying glass. When he realised he may have been deliberately poisoned he said: "My God. Perhaps I have been doped!"

To achieve these effects you need two references in the HEAD of your document: 
     <script language="JavaScript" src="http://www.hatii.arts.gla.ac.uk/sww/js/imageResize.js"></script>
     <LINK href="http://www.hatii.arts.gla.ac.uk/sww/css/imageFloats.css" type=text/css rel=stylesheet />

Alternatively download those two files (right-click the JS file and the CSS file and "Save as" to your web site and link to them directly: 

     <script language="JavaScript" src="imageResize.js"></script>
     <LINK href="imageFloats.css" type=text/css rel=stylesheet />

For each image you want to react to a mouseover or a mouse press: use a normal image tag, specifying the width of the (small) image, then surround the image tag with a span tag with onMouseOver or onMouseDown event handlers. The rollover looks like this: 

<span class="floatleft" onMouseOver="imageGrow(this, 500);" onMouseOut="imageShrink(this);">

   <IMG SRC="gsh.jpg" width="200" ALT="GSH" />

</span>

The press-mouse-button-to-enlarge is slightly more complicated: it needs an onMouseDown to initiate and both an onMouseUp and an onMouseLeave to return the image to normal, to catch both events: 

<span class="floatleft" onMouseDown="imageGrow(this,500);" onMouseUp="imageShrink(this);"  onMouseOut="imageShrink(this);">

   <IMG SRC="gsh.jpg" width="200" ALT="GSH" />

</span>

Note that imageGrow(this, 400) means change the WIDTH of the image from what it was to 400. the word "this" is required as shown. Use any other width size you wish, but the effects are quite odd if the target size is smaller than the original.

Things get more complicated if you want a caption associated with the picture...
Add a caption after the picture's closing span, then surround the whole lot (ie the outer span) with another span. 

<span class="floatleft">
   <span class="floatleft" onMouseOver="imageGrow(this, 500);" onMouseOut="imageShrink(this);">
      <IMG SRC="gsh.jpg" width="200" ALT="GSH" />
   </span>
   <br clear="all"/>Press and hold mouse button to enlarge
</span>

Ask Stephen Woodruff or Ian Anderson for help if you need it.