Interesting Image Color-Grayscale Switching

This article describes how to implement a fun feature. Tapping on an image turns it into a black and white image (grayscale). And tapping turns a grayscale into a color image.

It can be done with CSS and JavaScript.

With colorful images, it can be an interesting and fun experience to watch the image change.

The code in this article describes four ways to change the images.

1. The image loads in full color. When it's tapped, it transforms into grayscale.

2. The image loads in grayscale. When it's tapped, it transforms into full color.

3. The image loads in grayscale. When it's tapped, it transforms into full color. When it's taped again, it transforms back into grayscale. Then into color. Repeatedly.

4. The image loads in full color. When it's tapped, it transforms into grayscale. When it's taped again, it transforms back into color. Then into grayscale. Repeatedly.

The code found in this article might be updated and used for more serious implementations that use image coloration to indicate a selection, although they would be out of the scope of this article. As examples, grayscale/full color might be used to indicate a selected tab or for confirming a choice of something the image represents.

Implementation

The CSS

Here is the CSS. It may be on your site CSS file or separate on your page. It may also be specified inline if you prefer not to update a CSS file.

<style>
.image-4-switching { 
   filter:grayscale(100%); /* Default loads image as grayscale */
   transition:filter 7s;   /* Number of seconds for transition */
}
</style>

The transition:filter value of 7s indicates the number of seconds it takes to switch from grayscale to color or vice versa. Change 7 to your preferred number of seconds.

Make the CSS available on every page that will be implementing this. As noted, the CSS may be inline.

The JavaScript

The JavaScript is copy and paste. No customization required.

<script type="text/javascript">
function SwitchColor(d)
{
   // Default is to colorize.
   var fltr = new String(d.style.filter ? d.style.filter : "(1");
   if( fltr.match(/[1-9]/) ) { d.style.filter = "grayscale(0%)"; }
   else { d.style.filter = "grayscale(100%)"; }
}
function MakeGrayscale(d) { d.style.filter = "grayscale(100%)"; }
function MakeColor(d) { d.style.filter = "grayscale(0%)"; }
</script>

Put the JavaScript somewhere on every page that will be implementing this. At the end of the page, immediately above the </body> tag generally is a good place.

Now, with the CSS and JavaScript in place, the page is ready for the images.

To implement, you will need the URL of an image to use. Any publicly accessible image on the internet can be used for testing.

1. Example image that loads in full color. When it's tapped, it transforms into grayscale.

Here is the code to put on your web page.

<img 
 src="[URL_OF_IMAGE]" 
 class="image-4-switching" 
 style="filter:grayscale(0%);"
 onclick="MakeGrayscale(this)">

Replace [URL_OF_IMAGE] with the URL of your image.

The img tag's class attribute names the class in the CSS code found further above.

The img tag's style attribute style="filter:grayscale(0%);" specifies that the image shall load in color. (Without that style, it would load in grayscale.)

2. Example image that loads in grayscale. When it's tapped, it transforms into full color.

Here is the code to put on your web page.

<img 
 src="[URL_OF_IMAGE]" 
 class="image-4-switching" 
 onclick="MakeColor(this)">

Replace [URL_OF_IMAGE] with the URL of your image.

No img tag style attribute is used here. The default for the image-4-switching class loads the image in grayscale by default.

3. Example image that loads in grayscale. When it's tapped, it transforms into full color. When it's taped again, it transforms back into grayscale. Then into color. Repeatedly, when tapped.

Here is the code to put on your web page.

<img 
 src="[URL_OF_IMAGE]" 
 class="image-4-switching" 
 onclick="SwitchColor(this)">

Replace [URL_OF_IMAGE] with the URL of your image.

4. Example image that loads in full color. When it's tapped, it transforms into grayscale. When it's taped again, it transforms back into color. Then into grayscale. Repeatedly, when tapped.

Here is the code to put on your web page.

<img 
 src="[URL_OF_IMAGE]" 
 class="image-4-switching" 
 style="filter:grayscale(0%);"
 onclick="SwitchColor(this)">

Replace [URL_OF_IMAGE] with the URL of your image.

This code uses the style attribute style="filter:grayscale(0%);" to specify that the image shall load in color.

I hope you can find a place to use this technique.

It is indeed a fun way to present images. And, as you noticed, relatively easy to implement.

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

Will Bontrager