Javascript-форум - Менять картинки радиокнопкой

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Менять картинки радиокнопкой (https://javascript.ru/forum/misc/66287-menyat-kartinki-radioknopkojj.html)

Цитата:

Сообщение от Dilettante_Pro (Сообщение 437213)

Левый-правый:)

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider {
    width: 100px;
    height: 200px;
    background-image: url(http://file.mobilmusic.ru/11/54/a5/952948-400.jpg);
    background-size:   100px 200px;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s; 
  }

  .r:checked ~ .slider{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
  }
  </style>


</head>

<body>
  <input name="r" type="radio" checked="checked">
  <input name="r" type="radio" class="r">
  <div class="slider"></div>

</body>
</html>

Вот это вообще отличная идея то что надо!!!
Все теперь окончательно вопрос закрыт!

Цитата:

Сообщение от рони (Сообщение 437212)

.r:checked ~ один два .slider

А если сами инпуты будут оборачиваться отдельно какой синтаксис будет нужен.

Цитата:

Сообщение от j0hnik

какой синтаксис будет нужен.

тогда только js -- но можно инпуты не показывать, а lаbel в любое место

j0hnik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider {
    width: 100px;
    height: 200px;
    background-image:  url(http://images.vectorhq.com/images/previews/013/christmas-tree-psd-413028.png);
    background-size:   100px 200px;
    background-repeat: no-repeat;
  }

  .r:checked ~ .slider{
    background-image:  url(http://file.mobilmusic.ru/11/54/a5/952948-400.jpg);
  }

  [name="r"]{
    display: none;
  }
  label{
    margin: 5px;
  }

  </style>


</head>

<body>

  <input name="r" type="radio" checked="checked" id="left" >
  <input name="r" type="radio" class="r" id="right">
  <div class="slider"></div>
 <label for="left">left</label><label for="right">right</label>
</body>
</html>