Simple Image Swap

This image swap system is simple because:

1. No thumbnail image files need to be made.

2. There is a minimum of JavaScript.

3. All JavaScript is within the image tags themselves.

4. Images for swapping are preloaded automatically – no separate code required.

On the page is a large image and some thumbnail images. The large image is swapped with another when a thumbnail image is tapped or clicked (or moused over).

The thumbnail images are rendered from the full-size image files, just resized within their image tags to appear as thumbnails.

All JavaScript for this functionality is within the onclick or onmouseover attributes of the thumbnail images. No other JavaScript required.

The image swap appears instant because all images for the functionality are preloaded automatically. No pause while the replacement image is loading.

Because the thumbnail images are from the full-size image files, the browser automatically pre-loads the full-size images. It has to in order to display the thumbnails.

How it Works

The large image tag has an id value.

The thumbnail image tags contain the JavaScript to replace the large image.

When a thumbnail image is clicked, tapped, or moused over, it replaces the large image. The id value of the large image tag is used as a reference when making the swap.

An Example

In this example, the large image is swapped when the mouse pointer moves over the thumbnail or, on touch screens, when the thumbnail is tapped.

WWWWWWWWWWWWWWWW

Implementing Simple Image Swap

These are the steps:

One —
List the URLs of the images to be used. Decide which one will display as the large image when the page first loads.

Two —
Create the image tag for the large image.

Use the image tag for the example's large image as a template.

<img 
   id="large-image-id" 
   src="//www.willmaster.com/library/images/image_swap_article/BlueMidnite.jpg" 
   style="width:450px; height:338px;" 
   alt="large image">

In the above template, make the following changes:

1. Change the id value to one you prefer. (The id value is large-image-id in all example code on this page.)

2. Replace the src URL with the URL of the large image to display when the page first loads.

3. Change the width and height CSS property values to the width and height the large image will have. (When the large image is swapped with another, the new image will be displayed at the same size as the previous image.)

4. Change the alt value to one you prefer.

Three —
Create the image tags for the thumbnails.

Use an image tag for the example's thumbnail images as a template.

<img 
   onclick="document.getElementById('large-image-id').src=this.src" 
   onmouseover="document.getElementById('large-image-id').src=this.src" 
   src="//www.willmaster.com/library/images/image_swap_article/Mars.jpg" 
   style="width:106px; height:80px;" 
   title="Mars" 
   alt="thumb image">

In the above template, make the following changes:

1. Either remove or change the onclick attribute:

   • If you don't want the large image to change when the thumbnail is clicked or tapped — remove the onclick attribute.
   • Otherwise, replace large-image-id with the id value of the image tag displaying the large image.

2. Either remove or change the onmouseover attribute:

   • If you don't want the large image to change when the mouse hovers over the thumbnail — remove the onmouseover attribute.
   • Otherwise, replace large-image-id with the id value of the image tag displaying the large image.

3. Replace the src URL with the URL of the image to display as the thumbnail.

4. Change the width and height CSS property values to the width and height for the thumbnail.

5. Change the title value to one you prefer or remove it.

6. Change the alt value to one you prefer or remove it.

Four —
Repeat step Three for each thumbnail.

Five —
Put the image tags for the large image and the thumbnails into the web page source code where they shall display.

That's all there's to it.

The Example Source Code

For article completeness, here is the source code of the article's example.

<img 
   id="large-image-id" 
   src="//www.willmaster.com/library/images/image_swap_article/BlueMidnite.jpg" 
   style="width:450px; height:338px;" 
   alt="large image">

<img 
   onclick="document.getElementById('large-image-id').src=this.src" 
   onmouseover="document.getElementById('large-image-id').src=this.src" 
   src="//www.willmaster.com/library/images/image_swap_article/Mars.jpg" 
   style="width:106px; height:80px;" 
   title="Mars" 
   alt="thumb image">

<img 
   onclick="document.getElementById('large-image-id').src=this.src" 
   onmouseover="document.getElementById('large-image-id').src=this.src" 
   src="//www.willmaster.com/library/images/image_swap_article/WintersCastle.jpg" 
   style="width:106px; height:80px;" 
   title="Winter Castle" 
   alt="thumb image">

<img 
   onclick="document.getElementById('large-image-id').src=this.src" 
   onmouseover="document.getElementById('large-image-id').src=this.src" 
   src="//www.willmaster.com/library/images/image_swap_article/Waterpaint.jpg" 
   style="width:106px; height:80px;" 
   title="Waterpaint" 
   alt="thumb image">

<img 
   onclick="document.getElementById('large-image-id').src=this.src" 
   onmouseover="document.getElementById('large-image-id').src=this.src" 
   src="//www.willmaster.com/library/images/image_swap_article/BlueMidnite.jpg" 
   style="width:106px; height:80px;" 
   title="Blue Midnight" 
   alt="thumb image">

You now have image swap functionality that really works. And it was relatively easy to implement.

Will Bontrager