Jan
5

JavaScript Image Swap

Posted in JavaScript Tutorials by

2


JavaScriptJavaScript Image Swap

This easy to follow inline JavaScript is a great way to create click-to-enlarge (or mouse over) 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.


Click To Enarge Code

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4"><img src="swap_1_large.png" width="200" height="225" alt="Image Swap Sample" name="swap"></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><img src="swap_1_large.png" width="50" height="56" alt="Thumbnail" onmousedown="document.swap.src='swap_1_large.png';"></td>
    <td><img src="swap_2_large.png" width="50" height="56" alt="Thumbnail" onmousedown="document.swap.src='swap_2_large.png';"></td>
    <td><img src="swap_3_large.png" width="50" height="56" alt="Thumbnail" onmousedown="document.swap.src='swap_3_large.png';"></td>
    <td><img src="swap_4_large.png" width="50" height="56" alt="Thumbnail" onmousedown="document.swap.src='swap_4_large.png';"></td>
  </tr>
</table>

Mouse Over To Enlarge Code

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4"><img src="swap_1_large.png" width="200" height="225" alt="Image Swap Sample" name="swap"></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><img src="swap_1_large.png" width="50" height="56" alt="Thumbnail" onmouseover="document.swap.src='swap_1_large.png';"></td>
    <td><img src="swap_2_large.png" width="50" height="56" alt="Thumbnail" onmouseover="document.swap.src='swap_2_large.png';"></td>
    <td><img src="swap_3_large.png" width="50" height="56" alt="Thumbnail" onmouseover="document.swap.src='swap_3_large.png';"></td>
    <td><img src="swap_4_large.png" width="50" height="56" alt="Thumbnail" onmouseover="document.swap.src='swap_4_large.png';"></td>
  </tr>
</table>

Sample of a Click-to-Enlarge Photo Gallery

Image Swap Sample
« CLICK TO ENLARGE »
Thumbnail
Thumbnail
Thumbnail
Thumbnail

Top

2 Responses to “JavaScript Image Swap”

  1. Random Guest says:

    Hey thanks for your easy to understand code, it really helped me a lot. Though after doing a little bit more research, I would change onclick to onmousedown, just for browser accessibility issues.

    Reply
    February 18, 2013 at 7:43 pm

Leave a Reply