In the tables below are two images. Hovering over these will cause the image to expand.
This requires JavaScript in the head section of the page, and some changes to the image tag.
The JavaScript
The JavaScript goes in the head section of the page at a convenient spot just before the </head> tag:
<script type="text/javascript">
function doFill(xid,imgnme,wd,ht,img) {
var inhtml;
if (img>0) {
imgnme = "/fp/articles/navigation/images/" + imgnme + ".jpg"; //path to large image
}
else {
imgnme = "/fp/articles/navigation/images/" + imgnme + "_small.jpg"; //path to small image
}
document.getElementById(xid).height = ht
document.getElementById(xid).width = wd
document.getElementById(xid).src = imgnme
}
</script>
In the function call,
- xid is the id of the thumbnail image
- imgnme is the name of the large image, without any extension
- wdis the image display width
- ht is the image display height
- img is a number that designates which image should load - 0 for thumbnail, 1 for large image
The thumbnails are placed in table cells, and hyperlinked. The markup for the first image is:
<a href="images/fp-nav1.jpg" onclick="return false;" target="_blank" onmouseout="doFill('nb1','fp-nav1',150,143,0);" onmouseover="doFill('nb1','fp-nav1',430,400,1);"><img id="nb1" alt="Global" height="143" src="images/fp-nav1_small.jpg" style="border: none;" width="150" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="http://www.rxs-enterprises.org/fp/articles/navigation/images/fp-nav1.jpg" --></a>
Breaking this down:
| <a href="images/fp-nav1.jpg" |
Link to the large image |
onclick="return false;"
target="_blank" |
If Javascript is enabled in the browser, this causes any clicking on the link to do nothing, otherwise the large image will open in a new window, designated by the target value. |
| onmouseout="doFill('nb1','fp-nav1',150,143,0);" |
Loads the thumbnail image, replacing the large. |
| onmouseover="doFill('nb1','fp-nav1',430,400,1);"> |
Loads the large image, replacing the thumbnail. |
| <img id="nb1" |
image id |
| alt="Global" |
alt tag - necessary for accessibility |
| height="143" |
image display height |
| src="images/fp-nav1_small.jpg" |
image location (relative link) |
| style="border: none;" |
gets rid of borders around the image |
| width="150" /> |
image width, and close image tag |
| <!-- MSComment="autothumbnail" xthumbnail-orig-image="/fp/articles/navigation/images/fp-nav1.jpg" --> |
Comment added by Expression Web when using auto thumbnail. FrontPage adds this to the image tag. |
| </a> |
Close hyperlink |
In the events (onmouseover, onmouseout) the various parameters are placed in the function call, for example:
onmouseover="dofill('nb1', 'fp-nav1', 430, 400, 1)" loads an image named fp-nav1.jpg with width 430px, height 400px, replacing whatever image with id="nb1"
Similarly, the onmouseout event onmouseout="dofill('nb1', 'fp-nav1', 150, 143, 0)" loads an image named fp-nav1_small.jpg with width 150px, height 143px.
The JavaScript makes assumptions about the naming conventions for the thumbnails (all end with _small). the extension (.jpg), and the image location - in this case the /fp/articles/navigation/images/ folder- change this to suit your own web site.
 |
Some text related to the image |
 |
Some text related to the image |
The natural sizes for both large images are the same, but different dimensions are used in the JavaScript - the images are distorted as a result, but this demonstrates that the rendered size is specified in the HTML and JavaScript, rather than taken from the images themselves.