Manipulate an image using JavaScript to change its color to white when clicked

Question

Manipulate an image using JavaScript to change its color to white when clicked

I have a collection of images that I want to change to white when clicked, creating a fade effect. Essentially, when the image is clicked, it should transition from its original state to being completely white for a second. Additionally, I need the image to revert back to its original form when something else is clicked by the user.

Can this be achieved using JavaScript? If so, what specific aspects should I focus on (I struggle with graphics)?

I attempted to use opacity to accomplish this, but I do not want the background to show through the image.

javascript html css

Answer 1

Answer №1

Creative Solution Using Pseudo-elements

If you're looking for a unique way to overlay content, consider using a wrapper with a pseudo-element. This approach allows you to add animations that are efficiently controlled by a toggled CSS class, ensuring optimal performance.

Check out this CodePen demonstration for a visual example.

HTML

<div class="whiteclicker">
  <img src="http://lorempixel.com/400/200" alt=""/>
</div>

SCSS

@import "compass/css3/transition";

body { background: gainsboro; text-align: center; }

.whiteclicker {
  display: inline-block;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: white;
    opacity: 0;
    @include transition(opacity 1s ease);
  }
  &.active::after {
    opacity: 1;
  }
}

JS

$('.whiteclicker').click(function(){
  $(this).toggleClass('active');
});

Answer 2

Creative Solution Using Pseudo-elements

If you're looking for a unique way to overlay content, consider using a wrapper with a pseudo-element. This approach allows you to add animations that are efficiently controlled by a toggled CSS class, ensuring optimal performance.

Check out this CodePen demonstration for a visual example.

HTML

<div class="whiteclicker">
  <img src="http://lorempixel.com/400/200" alt=""/>
</div>

SCSS

@import "compass/css3/transition";

body { background: gainsboro; text-align: center; }

.whiteclicker {
  display: inline-block;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: white;
    opacity: 0;
    @include transition(opacity 1s ease);
  }
  &.active::after {
    opacity: 1;
  }
}

JS

$('.whiteclicker').click(function(){
  $(this).toggleClass('active');
});

Answer 3

Answer №2

In an effort to improve upon Spencer Wieczorek's solution (I believe that using two is the best option in my opinion):

Have you considered dynamically creating a white div element (and fading it in and out) instead of including it directly in the HTML code?

Check out the code example.

$("#myImage").click(function(){
    $(this)
    .parent().css({position:'relative'}).end()
    .after($('<div>')
           .hide()
           .css({position:'absolute'
                 , top: $(this).position().top
                 , left: $(this).position().left
                 , width: $(this).width()
                 , height: $(this).height()
                 , background: '#FFF'
                })
           .fadeIn('fast')
           .on({
                click : function(e){
                   $(this).fadeOut('fast', function(){ $(this).remove();});
                }
           })
          );
});

This way, you won't need to make any additions to the HTML code or CSS styles as jQuery handles everything.

@Spencer Wieczorek: I provided my own solution because I disagreed with your approach to designing the CSS style (fixed positioning may not be ideal, especially if the page is scrolled, for instance...). Mine is more independent and adaptable ;)

Answer 4

In an effort to improve upon Spencer Wieczorek's solution (I believe that using two is the best option in my opinion):

Have you considered dynamically creating a white div element (and fading it in and out) instead of including it directly in the HTML code?

Check out the code example.

$("#myImage").click(function(){
    $(this)
    .parent().css({position:'relative'}).end()
    .after($('<div>')
           .hide()
           .css({position:'absolute'
                 , top: $(this).position().top
                 , left: $(this).position().left
                 , width: $(this).width()
                 , height: $(this).height()
                 , background: '#FFF'
                })
           .fadeIn('fast')
           .on({
                click : function(e){
                   $(this).fadeOut('fast', function(){ $(this).remove();});
                }
           })
          );
});

This way, you won't need to make any additions to the HTML code or CSS styles as jQuery handles everything.

@Spencer Wieczorek: I provided my own solution because I disagreed with your approach to designing the CSS style (fixed positioning may not be ideal, especially if the page is scrolled, for instance...). Mine is more independent and adaptable ;)

Answer 5

Answer №3

If you're looking to create a cool effect with images, consider stacking two images on top of each other. Here's a simple way to achieve this:

<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
     if(currentImage==1){
         currentImage++;
         document.getElementById("image").innerHTML = image2;
     }
     if(currentImage==2){
         currentImage--;
         document.getElementById("image").innerHTML = image1;
     }
}
</script>
<style>
     .images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>

To add a fading effect to your images, here's a snippet that demonstrates how you could achieve it:

<script type="text/javascript">
var fadecount = 100;
function fade() {
    document.getElementById("imageToFade").style.opacity = fadecount;
    fadecount--;
    if(fadecount==0){
        clearTimeout(fade);
    }
}
function start_fade(){
    var fade = setTimeout(fade(), 10);
}
</script>

Answer 6

If you're looking to create a cool effect with images, consider stacking two images on top of each other. Here's a simple way to achieve this:

<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
     if(currentImage==1){
         currentImage++;
         document.getElementById("image").innerHTML = image2;
     }
     if(currentImage==2){
         currentImage--;
         document.getElementById("image").innerHTML = image1;
     }
}
</script>
<style>
     .images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>

To add a fading effect to your images, here's a snippet that demonstrates how you could achieve it:

<script type="text/javascript">
var fadecount = 100;
function fade() {
    document.getElementById("imageToFade").style.opacity = fadecount;
    fadecount--;
    if(fadecount==0){
        clearTimeout(fade);
    }
}
function start_fade(){
    var fade = setTimeout(fade(), 10);
}
</script>

Answer 7

Answer №4

By utilizing Base 64, you can store the binary version of an image along with an all white picture. When a user clicks on the image, the source is switched to the white base64...

In this scenario, JavaScript dynamically changes the source to the all white version upon clicking, eliminating the need for multiple elements existing on different layers.

Answer 8

By utilizing Base 64, you can store the binary version of an image along with an all white picture. When a user clicks on the image, the source is switched to the white base64...

In this scenario, JavaScript dynamically changes the source to the all white version upon clicking, eliminating the need for multiple elements existing on different layers.

Manipulate an image using JavaScript to change its color to white when clicked

Answer №1

Creative Solution Using Pseudo-elements

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Experiencing difficulty in successfully updating a React child component when the prop passed from the parent component is

Align content at the center of header with a colored background

After using browserify, when attempting to call the function in the browser, an Uncaught ReferenceError occurs

Syntax error triggered and caught by ajaxError

How to place the Google Custom Search box on top of an image in a Wordpress page using HTML code

Using Vue.js to filter a list based on index matches

Is it beneficial or detrimental to utilize a HTML Form?

A guide to effectively utilizing FocusIn and FocusOut for the complete functionality of the PrimeNG tree widget

What causes two elements with display: inline-block; position: absolute; to overlap instead of appearing side by side?

Issue with responsive image display on Android device with Chrome browser

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Implementing Async Detect Series for Output Retrieval in Node.js

Tips for modifying the size of your input

Every time I hover, my jQuery code keeps repeating the hover effect

Is it possible to execute an Ajax Request using JQuery?

Enable or disable multiple input options based on dropdown selection changes

What is the best way to remove the help button on the WordPress dashboard?

What steps should I take to resolve my header issues post upgrading to Bootstrap 4?

Initiate the typeahead drop down menu by pressing the downward key and then navigate through the options within the drop down