John Reid of C6 Software has a image magnification JavaScript library called Popbox. He claims that it is very useful for dynamically moving and resizing images, particularly if you are presenting a set of thumbnail images that pop to full-size images in response to a user action such as mouse over or click.

Pop(obj, speed, className)

Moves the images to center screen, expands the image to full image dimensions or window size, whichever is smaller.

PopEx(obj, newLeft, newTop, newWidth, newHeight, speed, className)

Allows for greater control over image movement and sizing. One possibility is "landscape effects" by setting the newWidth parameter to null to allow the full width, but setting the newHeight parameter to 0 to allow the height of the browser window.

PopInPlace(obj, speed, className)

Expands the image over the original image to the full image dimensions or windows size, whichever is smaller.

---

Images used:

• magplus.cur
• magminus.cur
• Small Hippo Pumpkin picture
• Large Hippo Pumpkin picture

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

<style type="text/css">

.PopBoxImageSmall
{
   border: none 0px white;
   cursor: url("magplus.cur"), pointer;
}
.PopBoxImageLarge
{
   border: solid thin #CCCCFF;
   cursor: url("magminus.cur"), pointer;
} 

</style>

...

<img  id="hippo" alt=""
src="smallHippoPumpkin.jpg"
pbsrc="hippoPumpkin.jpg"
class="PopBoxImageSmall" 
onclick="Pop(this,50,'PopBoxImageLarge');"
ondblclick="Revert(this,50,'PopBoxImageSmall');"
pbShowRevertBar="false"
pbShowRevertText="false"
pbShowRevertImage="false"
pbRevertText=""
pbRevertImage="magminus.gif" />

<img  id="hippo2" alt=""
src="smallHippoPumpkin.jpg"
pbsrc="hippoPumpkin.jpg"
class="PopBoxImageSmall" 
onclick="PopEx(this,200,200,580,100,5,'PopBoxImageLarge');"
ondblclick="Revert(this,50,'PopBoxImageSmall');"
pbShowRevertBar="false"
pbShowRevertText="false"
pbShowRevertImage="false"
pbRevertText=""
pbRevertImage="magminus.gif" />


<img  id="hippo3" alt=""
src="smallHippoPumpkin.jpg"
pbsrc="hippoPumpkin.jpg"
class="PopBoxImageSmall" 
onclick="PopEx(this,150,-150,100,500,5,'PopBoxImageLarge');"
ondblclick="Revert(this,50,'PopBoxImageSmall');"
pbShowRevertBar="false"
pbShowRevertText="false"
pbShowRevertImage="false"
pbRevertText=""
pbRevertImage="magminus.gif" />

<img  id="hippo4" alt=""
src="smallHippoPumpkin.jpg"
pbsrc="hippoPumpkin.jpg"
class="PopBoxImageSmall" 
onclick="PopInPlace(this, 5, 'PopBoxImageLarge');"
pbShowRevertBar="false"
pbShowRevertText="false"
pbShowRevertImage="false"
pbRevertText=""
pbRevertImage="magminus.gif" />