Question

Sorry if this is already posted, but I really need your help.

What I want is following:

Let’s say I have this image as normal image that can be clicked.
https://i.stack.imgur.com/pGYyG.png

Now let’s say, when I click on that image it will fade this image:
https://i.stack.imgur.com/bUPmP.png

Can anyone tell me how to code this on click image selection ? Or if it cannot be onclick then how else, please?

EDIT:
Also I forgot to mention. If I have 2 selecting choices…
And if I click one choice it fades in and if I select choice 2, choice 1 should fade out and choice 2 fade in like it should…

Answer 1

Presuming by fade, you mean an animated fade, you can use the following code:

HTML:

<div id="something" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

<div id="somethingElse" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

jQuery:

$(document).ready(function(){
    $('.theImage img').click(function(){
      var current = ($(this).parent().attr('id') == 'something') ? 'somethingElse' : 'something';console.log(current);
      $(this).fadeOut();
      $('#'+current + ' img').fadeIn();
    });
});

This will show the default image to start off with, then fade out to show the background image of it’s container when clicked. You may decide to use different HTML elements depending on your situation.