0

これがすでに投稿されている場合は申し訳ありませんが、私は本当にあなたの助けが必要です。

私が欲しいのは次のとおりです。

クリックできる通常の画像としてこの画像を持っているとしましょう。 http://i.imgur.com/SOd1W.png

たとえば、その画像をクリックすると、この画像がフェードアウトします：http: //i.imgur.com/QW15C.png

クリック画像の選択でこれをコーディングする方法を教えてもらえますか？または、クリックできない場合は、他にどのようにお願いしますか？

編集：また私は言及するのを忘れました。2つの選択肢がある場合...1つの選択肢をクリックするとフェードインし、選択肢2を選択すると、選択肢1がフェードアウトし、選択肢2がフェードインします...

4

8 に答える 8

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 に答える
1

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

    });
});

デモを見る... BrianCrayによるjQueryを使用した単純な画像ランダマイザーのソース

または、CSS3を使用することもできます。CSS3を使用したシンプルなフェードの詳細を見る

于 2012-05-04T12:03:18.937 に答える
0

jQueryのジョブのように見えますclick（）

これがコード http://jsfiddle.net/ZzDJ8/です

于 2012-05-04T11:53:32.473 に答える
0

CSSでは非常に簡単です。画像にアクティブな疑似クラスを与える必要があります。

.img {背景：url（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 に答える