普通图像和所选图像？ 需要jQuery还是CSS？

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. http://i.imgur.com/SOd1W.png

Now let's say, when I click on that image it will fade this image: http://i.imgur.com/QW15C.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.

Answer 2

One way (there are several):

Include both images as tags (not background images) wrapped inside a div:

<div id="wrapper">
    <img src="http://i2.cdn.turner.com/cnn/dam/assets/120423012508-merkel-sarkozy-c1-main.jpg" id="img1" />
    <img src="http://d2o307dm5mqftz.cloudfront.net/1005866/1334968885891/Perfect%20Gift%20No%20Pink_300x250.jpg" id="img2" />
</div>

CSS:

#wrapper{
    position:relative;
    height:242px;
    width:194px;
}      
#wrapper img{
    position:absolute;
    left:0px;
    top:0px;
    height:242px;
    width:194px;
} 
#img1{display:none;}

jQuery:

$('#wrapper').on('click', function (event){
    $('#wrapper img').fadeToggle();
});

Answer 3

$(document).ready(function() {
    var imagelist = ["http://i.imgur.com/SOd1W.png","http://i.imgur.com/QW15C.png"];

    $('.img1').click(function(e) {   
             var myimage = imagelist [Math.floor(Math.random()*imagelist .length)];
             $('.img1').attr('src', myimage );

    });
});

See the demo ... Source simple image randomizer with jQuery by Brian Cray

Alternatively you can use CSS3 as well. See more about A Simple Fade with CSS3

Answer 4

Use This Javascript

function Image(imageId)
{
    var obj = document.getElementById(imageId);
    if(obj.alt=='Fade'){
       obj.src="image1.jpg";     
       obj.alt = "Unfadde";
     }
    else
     {
       obj.src="image2.jpg";     
       obj.alt = "Fade";
      }  
 }

and HTML

<img src="image1.jpg" onclick=Image("image") id="image" name="image" alt="Fade" />

Answer 5

Looks like job for jQuery click()

Here is code http://jsfiddle.net/ZzDJ8/

Answer 6

It's very simple in CSS, you need to give the image an active pseudoclass:

.img {background: url(firstimg.png);}

.img:active {background: url(clickimg.png);}

Here's an example: http://jsfiddle.net/J6kJh/

Answer 7

<img src="a.png" id="MyImg" />

jQuery的：

$("#MyImg").click(function() { $(this).attr("src","b.png") });

Answer 8

您是否正在寻找这样的东西？

<img src="http://i.imgur.com/SOd1W.png" onclick="$(this).fadeOut().attr('src','http://i.imgur.com/QW15C.png').fadeIn();">