0

抱歉，如果这已经发布，但我真的需要你的帮助。

我想要的是以下内容：

假设我将此图像作为可以单击的普通图像。 http://i.imgur.com/SOd1W.png

现在假设，当我单击该图像时，它会淡化该图像：http: //i.imgur.com/QW15C.png

谁能告诉我如何在点击图像选择上编码？或者，如果它不能是 onclick，那还有什么办法呢？

编辑：我也忘了提。如果我有 2 个选择...并且如果我单击一个选择它会淡入，如果我选择选择 2，则选择 1 应该会淡出，而选择 2 会像它应该的那样淡入...

4

8 回答 8

1

一种方式（有几种）：

将两个图像作为标签（不是背景图像）包含在 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();
});
于 2012-05-04T12:00:57.980 回答
1 
$(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 );

    });
});

查看演示...使用 jQuery 提供简单的图像随机化器，作者 Brian Cray

或者，您也可以使用 CSS3。查看更多关于使用 CSS3 的简单淡入淡出

于 2012-05-04T12:03:18.937 回答
1

使用这个 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";
      }  
 }

和 HTML

<img src="image1.jpg" onclick=Image("image") id="image" name="image" alt="Fade" />
于 2012-05-04T12:04:41.293 回答
1

假设淡入淡出，您的意思是动画淡入淡出，您可以使用以下代码：

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();
    });
});

这将显示开始时的默认图像，然后在单击时淡出以显示其容器的背景图像。您可以根据自己的情况决定使用不同的 HTML 元素。

于 2012-05-04T11:59:40.407 回答
0

看起来像是 jQuery click()的工作

这是代码 http://jsfiddle.net/ZzDJ8/

于 2012-05-04T11:53:32.473 回答
0

这在 CSS 中很简单，你需要给图像一个活动的伪类：

.img {背景：网址（firstimg.png）；}

.img:active {背景：url(clickimg.png);}

这是一个例子：http: //jsfiddle.net/J6kJh/

于 2012-05-04T11:56:36.617 回答
0 
<img src="a.png" id="MyImg" />

jQuery：

$("#MyImg").click(function() { $(this).attr("src","b.png") });
于 2012-05-04T11:58:06.230 回答
0

你在寻找这样的东西吗？

<img src="http://i.imgur.com/SOd1W.png" onclick="$(this).fadeOut().attr('src','http://i.imgur.com/QW15C.png').fadeIn();">
于 2012-05-04T11:59:06.840 回答