Обмен изображениями с использованием только CSS и наличие ссылки на изображение после замены

Question

Я хочу поменять изображение при нажатии, используя только CSS .Когда по изображению щелкают и выполняется своп, при щелчке по новому изображению должна быть ссылка на новый URL-адрес, а не замена, как в текущей функциональности.

Я посмотрел на этот jsfiddle икажется, что я достиг многого из того, чего хочуМне просто нужно поменять местами текущий фон для фоновых изображений и добавить ссылку на новый URL:

http://jsfiddle.net/4huzr/

html

<input type='checkbox' name='thing' value='valuable' id="thing"/><label 
    for="thing"></label> 

css

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
} 

Есть ли способ иметь ссылку на замененное изображение, чтобы оно переходило на новый URL после замены изображения.

Спасибо, и я был бы признателен за любую помощь.

Answer 1

Вы на правильном пути с селектором input[type=checkbox]:checked.Используйте background-image для переключения изображения в метке:

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
display:inline-block;
padding: 0 0 0 0px;
height:220px;
width:220px;
background-image: url(https://placeimg.com/220/220/any);
}
input[type=checkbox]:checked + label
{
background-image: url(https://placeimg.com/220/220);
}
.replacement{
  display:none;
}
input[type=checkbox]:checked ~ a.original{
   display:none;
}
input[type=checkbox]:checked ~ a.replacement{
   display:inline-block;
}

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 
<br>
<a class="replacement" href="http://google.com">google.com</a>
<a class="original" href="http://stackoverflow.com">stackoverflow.com</a>