Tap to Swap an Image

Last week, a long-time associate asked about coding something so when an image is tapped the underlying image is revealed.

It was to emulate functionality he saw elsewhere. There was a blurred, smudged, or otherwise obscured or distorted image. When the distorted image was tapped, the original image was displayed.

It was an interesting concept and I agreed to work up some code. You'll find it later in this article.

I didn't ask what the purpose was, but imagined some.

One purpose might be to require a tap for revealing what their free gift is. Another purpose might be to reveal the answer to a question. Or perhaps to require an action before revealing an image that might be offensive to some people. Or, the first might be a clear, non-distorted image with the underlying image related to the first.

The code in this article was created for the requested functionality, whatever the purpose might be.

How it Works

There are two divs. Both are the same size. Both contain an image.

On page load, the first div is displayed and the second div is undisplayed.

When the image in the first div is tapped, the first div is undisplayed and the second div is displayed.

Here is the idea.

<!-- first div -->
<div
   onclick="..."
   style ="...">
[image]
</div>

<!-- second div -->
<div
   id="..."
   style ="...">
[image]
</div>

In both divs, the style specifies the same div dimensions so there is no page-layout disruption when one is displayed and the other undisplayed.

In the first div, the code in the onclick attribute displays the second div and undisplays its own first div.

In the second div, the id is required so the onclick of the first div can find it.

An Example

The code for this example is further below.

Tap the image that was displayed when this page loaded. A second image will take it's place.

The Code

Here is the code for the above examples. Information follows.

<div
   onclick="document.getElementById('div2').style.display='block'; this.style.display='none'"
   style="display:block; width:128px; height:128px; border:1px solid #ccc;">
<img src="https://www.willmaster.com/images/icons/software-icon.png" style="max-width:100%; max-height:100%;">
</div>

<div 
   id="div2" 
   style="display:none; width:128px; height:128px; border:1px solid #ccc;">
<img src="https://www.willmaster.com/images/icons/custom-software-icon.png" style="max-width:100%; max-height:100%;">
</div>

Information

1. You'll see div2 in two places of the above code.

   • The div2 in the JavaScript of the onclick attribute of the first div is identical to the id value div2 of the second div.

   If the id value of the second div changes, the change must also be made in the JavaScript of the onclick attribute in the first div.

2. The dimensions of both divs need to be identical. In the example code, the dimensions are width:128px; height:128px;.

The only thing left to do is to give each div the appropriate image in its image tag and, if needed, change the dimensions of the divs.

The entire implementation is fairly straight-forward.

More than one instance of the image swap can be published on a web page. Simply change the id value for the second div of additional image swaps.

There you have it. When a site visitor taps the image of the first div, the image of the second div appears.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager