Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Graphics

2008112501 Email to Ronx
 

Swap thumbnails for larger images

How to swap a thumbnail for the large image


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.


Global Some text related to the image

Child pages under Home 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.