Image Swap

An image tag may swap images at a specified pace. No built-in maximum number of swap images.

Here is a demonstration. (If interested, these and other books are listed at books.bontragerconnection.com.)

The code is in three parts:

• An img tag.
• A list of images to swap.
• The JavaScript.

An img tag.

It's a regular image tag with an id value.

<img 
   id="my-image-swap" 
   style="max-width:100%;" 
   src="https://willbontrager.com/coverimages/sadine/SadineTheMagicElf(200w).jpg">

The id my-image-swap is used in the JavaScript in the customization section. If you change the id value, it needs to be changed in both places.

If not all images you intend to swap are the same dimensions, the web page may need to redraw when an image changes. To solve that, put the image tag into a div with a specified width and height.

A list of images to swap.

A list of image URLs is in a hidden div. These are the images the img tag will swap. If you wish to change the list of images, it can be done without touching the JavaScript at all. Just change the image URLs in this div.

<div 
   id="my-swap-image-urls" 
   style="display:none;">
https://willbontrager.com/coverimages/sadine/SadineTheMagicElf(200w).jpg
https://royforth.com/bookcovers/TheKick_AmishMummyAndWildWonder-200.jpg
https://vernharrison.com/bookcovers/SalleMay-TortureTrail-200w.jpg
https://willbontrager.com/coverimages/MessengerWill/CoverMessengerWill-200w.jpg
https://vernharrison.com/bookcovers/SalleMay-LethalCleanout-200w.jpg
https://willbontrager.com/coverimages/cranky/CoverTheCrankyEscape-200w.jpg
https://vernharrison.com/bookcovers/Pursuit-Maude-200w.jpg
</div>

The id my-swap-image-urls is used in the JavaScript in the customization section. If you change the id value, it needs to be changed in both places.

The div must have a display:none; CSS rule.

Place the div anywhere on the web page.

The JavaScript.

The JavaScript has 3 places to customize. The div id value of the img, the div with list of image URLs, and the number of seconds between swaps.

<script type="text/javascript">
// Image Swap Within IMG Tab, Version 1.0, October 9, 2026, Will Bontrager Software LLC

// ************* Customization:
var IDofImgTag = "my-image-swap";
var IDofImageListDiv = "my-swap-image-urls";
var SecondsBetweenSwaps = 6; // Decimal number allowed.
// ************* End of customization.

var ImageList = new Array();
var NowImage = 0;
IDofImgTag = document.getElementById(IDofImgTag);
var ts = document.getElementById(IDofImageListDiv).innerHTML.replace(/^\s*/s,"");
ts = ts.replace(/\s*$/s,"");
var ts = ts.split(/\s+/);
for(var i=0;i<ts.length;i++)
{
   var t = ts[i].replace(/^\s*/s,"");
   t = t.replace(/\s*$/s,"");
   ImageList.push(t);
}
var LastImage = ImageList.length-1;
function SwapAnImage()
{
   NowImage++;
   if(NowImage>LastImage){NowImage=0;}
   IDofImgTag.src=ImageList[NowImage];
}
setInterval(SwapAnImage,parseInt(SecondsBetweenSwaps*1000));
</script>

The IDofImgTag value my-image-swap is the same as the id value of the img tag. If you change the value, it needs to be changed in both places.

The IDofImgTag value my-swap-image-urls is the same as the id value of the div where the image URLs are listed. If you change the value, it needs to be changed in both places.

The IDofImageListDiv value 6 specifies the number of seconds between image swaps. The number may be a decimal.

The JavaScript should be in the source code somewhere below both the img tag and the div with the image URLs. Immediately above the cancel </body> should work.

After installing on a page, let the image tag run through every image of your list. If any image URLs are 404, it should be obvious at the first view.

(This content first appeared in Possibilities newsletter.)

Will Bontrager