How to Insert Image Rollover Script from Dynamic Drive into Office Live Page
Dynamic Drive Script Source - http://www.dynamicdrive.com/style/csslibrary/category/C4/

Castle Mountain in Banff National Park

Rolling the cursor over the thumbnail creates an enlargement. Note that the Module must be floated left in this case so that the enlargement floats over the text to the right of the thumbnail. If the module is not floated, On rollover, all other page content will be pushed down below the enlarged image.

The Office Live Site Designer must have the Advanced Option enabled to reveal the Style Sheet Icon in the tool bar under the Site Designer Tab.
Cut/paste the following into the Style Sheet dialogue box which pops up when you click the Style Sheet icon in the Site Designer. Note: If there are already some custom styles within the dialogue box do not overwrite them simply paste the following below the existing styles.

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.ienlarger {
    float: left;
    clear: none; /* set to left or right if needed */
    padding-bottom: 5px; /* space between thumbs. Don't change this

to margin */
    padding-right: 5px; /* space between thumbs and wrapping text

when there is any text around it */
}

.ienlarger a {
    display:block;
    text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
     position:relative;
}

.ienlarger span img {
    border: 1px solid #FFFFFF; /* adds a border around the image */
    margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
    position: absolute;
    display:none;
    color: #FFCC00; /* caption text colour */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px; /* caption text size */
    background-color: #000000;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
    display:block;
    top: 50px; /* means the pop-up's top is 50px away from thumb's

top */
    left: 90px; /* means the pop-up's left is 90px far from the

thumb's left */
    z-index: 100;
}

.resize_thumb {
    width: 200px; /* enter desired thumb width here */
    height : auto;
}
/* smart image enlarger ends here */

Code to be added to your page
Position your cursor on the page where you want the thumbnail to appear. Use the "Custom Footer" module at the insertion point. Cut and paste the following code into the "Custom Footer" module to overwrite the code that is in the Custom Footer module when you first pop it up.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/">
<![CDATA[


<div class="ienlarger"><a href="http://www.canmoreoffice.com/"><img src="http://canmoreoffice.com/images/castle3.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://canmoreoffice.com/images/castle3.jpg" alt="large" /><br />
    Castle Mountain in Banff National Park</span></a></div>

<br style="clear:left" />


]]>
</xsl:template>
</xsl:stylesheet>

Note: you need to replace the image sources (http://canmoreoffice.com/images/castle3.jpg) with your own image addresses.