Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Менять картинки радиокнопкой (https://javascript.ru/forum/misc/66287-menyat-kartinki-radioknopkojj.html)

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

рони 06.12.2016 13:47
Цитата:
Сообщение от j0hnik
вопрос для тех кто знает JS
css

j0hnik 06.12.2016 14:24
на js хочешь сказать такое невозможно? :no:

рони 06.12.2016 14:27
j0hnik,
можно и js, но зачем, если достаточно css?

рони 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 06.12.2016 14:43
блоки в котором картинка с правой стороны не прям под ним, display non тут не хочет работать.
Подскажи пожалуйста хоть на CSS хоть на JS если знаешь.

j0hnik 06.12.2016 14:52
Цитата:
Сообщение от рони (Сообщение 437209)
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> еще в пару дивов обернут и не работает.

рони 06.12.2016 14:55
Цитата:
Сообщение от j0hnik
еще в пару дивов обернут
.r:checked ~ один два .slider

Dilettante_Pro 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 06.12.2016 14:59
Цитата:
Сообщение от рони (Сообщение 437212)
.r:checked ~ один два .slider
Спасибо, не додумался сразу!


Часовой пояс GMT +3, время: 15:09.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице