Image Swap

This easy to follow inline JavaScript is a great way to create click-to-enlarge image galleries. Or to display several pictures without loading your Web page full of images. See our Folio page for a working example.

Besides the main image, you will want to create a second image to represent the main image. This can either be a graphic, or a thumbnail of the original image as we have done in the example below. You can also use tables to help format the positioning of the main image and thumbnails. If using this technique for a click-to-enlarge gallery, it works best to have all the photos the same size so the copy under the photos does not jump.

« CLICK TO ENLARGE »

<div align="center" style="width: 150px; margin-top: 12px; padding: 12px; border: 1px solid #cccccc; margin-left: auto; margin-right: auto;">
<img src="img/img_swap_1.gif" border="0" alt="Image Swap Sample" name="swap" style="padding: 12px; border: 1px solid #cccccc; margin-bottom: 4px;"><br>
&laquo;&nbsp;CLICK TO ENLARGE&nbsp;&raquo;<br>
<img src="img/img_swap_1_s.gif" alt="" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_1.gif';">&nbsp;
<img src="img/img_swap_2_s.gif" alt="" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_2.gif';">&nbsp;
<img src="img/img_swap_3_s.gif" alt="" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_3.gif';">&nbsp;
<img src="img/img_swap_4_s.gif" alt="" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_4.gif';">
</div>

To Top TO TOP