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.

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.

<table border="0" cellspacing="0" cellpadding="0" style="border:
1px solid #dddddd; margin-left: auto; margin-right: auto;">
  <tr>
    <td colspan="4" style="padding: 12px;"><img src="swap_1_large.png" width="200" height="225" alt="Image
Swap Sample" name="swap" style="border: 1px solid #dddddd;
padding: 16px;" /></td>
  </tr>
  <tr>
    <td colspan="4"><div style="font-size: 11px; text-align:
center; padding: 0px 0px 12px 0px;">&laquo;&nbsp;CLICK TO ENLARGE&nbsp;&raquo;</div></td>
  </tr>
  <tr>
    <td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_1_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_1_large.png’;" /></div></td>
    <td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_2_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_2_large.png’;" /></div></td>
    <td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_3_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_3_large.png’;" /></div></td>
    <td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_4_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_4_large.png’;" /></div></td>
  </tr>
</table>
Image Swap Sample
« CLICK TO ENLARGE »
Thumbnail
Thumbnail
Thumbnail
Thumbnail

Related posts:

  1. Javascript: Easy Popup Windows
  2. Javascript: Easy Rollover Buttons
  3. Formatting Tables
  4. Background Color & Images – Not Tables!
  5. Images <img>
  6. CSS: Menu Lists
  7. CSS: Padding
  8. CSS: Margin
  9. CSS: Border
  10. SEO: Image Optimization
  11. SEO: Link Building
  12. Menu Lists <ul>, Definition Lists <dl>
  13. CSS: Font Properties
  14. Heading Tag <h1> – <h6>
  15. CSS Tutorials
  16. Javascript Tutorials
  17. KDWHD Tutorials
  18. eBay Tutorials
  19. SEO Tutorials
  20. HTML 4.01 Strict Tutorials
  21. Paragraph Tags <p>
  22. SEO: Keyword Selection
  23. Beginner HTML: Your First Webpage
  24. CSS: External Style Sheets
  25. CSS Syntax
  26. Video: How to Install your “me” Page on eBay
  27. Video: How to Create Custom eBay Store Pages
  28. Video: How to Install Custom eBay Store Navigation
  29. Video: How to Install Custom eBay Store Front Page
  30. How Do I Add a Background Image or Color?