Форум

j0hnik · #1 (**permalink**) 06.12.2016, 13:09

Ерунда вопрос для тех кто знает JS
есть 2 радиокнопки выбор стороны открывания двери (правая и левая)
и есть соседний блок (справа обернутый в пару дивов) див в котором должна меняться картинка (правая или левая дверь) клиенты просто часто путают правую с левой, картинка решила бы вопрос.
В интернете нашел какие решения более сложных задач, а той ерунды нигде нет.
Спасибо за внимание.

рони · #2 (**permalink**) 06.12.2016, 13:47

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

вопрос для тех кто знает JS

css

j0hnik · #3 (**permalink**) 06.12.2016, 14:24

на js хочешь сказать такое невозможно?

рони · #4 (**permalink**) 06.12.2016, 14:27

j0hnik,
можно и js, но зачем, если достаточно css?

рони · #5 (**permalink**) 06.12.2016, 14:38

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);
  }
  </style>


</head>

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

</body>
</html>

j0hnik · #6 (**permalink**) 06.12.2016, 14:43

блоки в котором картинка с правой стороны не прям под ним, display non тут не хочет работать.
Подскажи пожалуйста хоть на CSS хоть на JS если знаешь.

j0hnik · #7 (**permalink**) 06.12.2016, 14:52

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

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);
  }
  </style>


</head>

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

</body>
</html>

да я пробовал наподобе но <div class="slider"></div> еще в пару дивов обернут и не работает.

рони · #8 (**permalink**) 06.12.2016, 14:55

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

еще в пару дивов обернут

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

Dilettante_Pro · #9 (**permalink**) 06.12.2016, 14:59

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

<!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>

j0hnik · #10 (**permalink**) 06.12.2016, 14:59

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

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

Спасибо, не додумался сразу!

Форум

Справочник

Discord чат

Курсы javascript