Нормальное изображение и выбранное изображение? Требуется jQuery или css?

Question

Извините, если это уже отправлено, но мне действительно нужна ваша помощь.

Я хочу следующий:

Допустим, у меня есть этот образ, как нормальное изображение, которое может быть нажата. http://i.imgur.com/SOd1W.png

Теперь допустим, когда я нажимаю на этом изображении она будет исчезать это изображение: http://i.imgur.com/QW15C.png

Может кто-нибудь сказать мне, как код этого при выборе Нажмите на изображение? Или, если он не может быть включен, то как же еще, пожалуйста?

EDIT: Также я забыл упомянуть. Если у меня есть выбор 2 выбора ... И если я нажму на один из вариантов, он затухает, и если я выберу выбор 2, выбор 1 должен исчезнуть, а выбор 2 исчезнет, ​​как и должно ...

Answer 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-элементы в зависимости от вашей ситуации.

Answer 2

Похож на работу JQuery click()

Вот код http://jsfiddle.net/ZzDJ8/

Answer 3

очень просто в CSS, вам нужно придать изображению активное pseudoclass:

.img {фон: URL (firstimg.png);}

.img: активный {фон: URL (clickimg.png);}

Вот пример: http://jsfiddle.net/J6kJh/

Answer 4

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

JQuery:

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

Answer 5

Вы ищете что-то вроде этого?

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

Answer 6

Один из способов (есть несколько):

Включите оба изображения в качестве тегов (не фоновые изображения), обернутых внутри 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 7

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

    }); 
}); 

Смотрите demo ... Источник simple image randomizer with jQuery by Brian Cray

В качестве альтернативы вы можете использовать CSS3, а также. Подробнее о A Simple Fade with CSS3

Answer 8

Использовать этот 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" />