Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.01.2013, 19:46   #1
pashka_dos
Пользователь
 
Аватар для pashka_dos
 
Регистрация: 19.11.2011
Сообщений: 83
Сообщение Изменение стиля картинки по клику.

Доброго время суток, помогите решить проблему.

Есть 4 картинки, при клике на любую из эти картинок, применяется к ней стиль например: border: 1px solid;

Если кликнуть на другую картинку, то к ней применяется тот же стиль, а с другой картинки этот стиль снимается (что-то на подобии радио кнопок, только с картинками)

JavaScript не знаю, если можно готовый код.
Заранее спасибо))
pashka_dos вне форума Ответить с цитированием
Старый 18.01.2013, 09:32   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Можно.
Код:
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<style>
.image {
  border:1px solid transparent;
}
.image-checked {
  border:1px solid #f00;
}
</style>
<div class="image-wrapper">
  <img src="1.jpg" alt="1" class="image">
  <img src="2.jpg" alt="2" class="image">
  <img src="3.jpg" alt="3" class="image">
  <img src="4.jpg" alt="4" class="image">
</div>
<script>
  "use strict";
  (function($, window, undefined){
    $('.image-wrapper').each(function(){
      var img_list = $(this).find('.image');
      img_list.click(function(){
        img_list.removeClass('image-checked');
        $(this).addClass('image-checked');
      });
    });
  })(jQuery, window)
</script>
Дизайна жду, заняться нечем))
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 18.01.2013, 12:15   #3
pashka_dos
Пользователь
 
Аватар для pashka_dos
 
Регистрация: 19.11.2011
Сообщений: 83
Радость

Цитата:
Сообщение от Naive Посмотреть сообщение
Можно.
Код:
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<style>
.image {
  border:1px solid transparent;
}
.image-checked {
  border:1px solid #f00;
}
</style>
<div class="image-wrapper">
  <img src="1.jpg" alt="1" class="image">
  <img src="2.jpg" alt="2" class="image">
  <img src="3.jpg" alt="3" class="image">
  <img src="4.jpg" alt="4" class="image">
</div>
<script>
  "use strict";
  (function($, window, undefined){
    $('.image-wrapper').each(function(){
      var img_list = $(this).find('.image');
      img_list.click(function(){
        img_list.removeClass('image-checked');
        $(this).addClass('image-checked');
      });
    });
  })(jQuery, window)
</script>
Дизайна жду, заняться нечем))
То что нужно, спасибо большое))
pashka_dos вне форума Ответить с цитированием
Старый 18.01.2013, 20:43   #4
pashka_dos
Пользователь
 
Аватар для pashka_dos
 
Регистрация: 19.11.2011
Сообщений: 83
Вопрос

Новая проблема((

А как мне теперь отправить id картинки, которой присвоен класс image-checked


Код HTML:
<form action="post.php" method="post">
  <input id="name" type="text"/>
  <label for="name">Ваше имя</label><br />
                 
  <div class="image-wrapper" style="display: inline-block;">
    <img src="images/captcha/1.png" alt="1" class="image" id="1"/>
    <img src="images/captcha/2.png" alt="2" class="image" id="2"/>
    <img src="images/captcha/3.png" alt="3" class="image" id="3"/>
    <img src="images/captcha/4.png" alt="4" class="image" id="4"/>
  </div>
                    <script>
                      "use strict";
                      (function($, window, undefined){
                        $('.image-wrapper').each(function(){
                          var img_list = $(this).find('.image');
                          img_list.click(function(){
                            img_list.removeClass('image-checked');
                            $(this).addClass('image-checked');
                          });
                        });
                      })(jQuery, window)
                    </script>
                            
  <input type="submit" value="Отправить" class="btn"/>
</form> 
pashka_dos вне форума Ответить с цитированием
Старый 20.01.2013, 20:16   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Надо было сразу задачу уж писать...
Это делается через радио-кнопки, без js
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение стиля выделения TreeView IIISpikerIII C# (си шарп) 0 18.06.2012 22:32
Label изменение стиля текста Zuba C++ Builder 2 06.05.2012 01:28
изменение стиля сайта в рантайме tranvay ASP.NET 0 04.03.2011 18:30
Изменение стиля линии графика! 4ika Общие вопросы C/C++ 2 04.05.2010 21:37
Изменение стиля линии графика! 4ika Общие вопросы C/C++ 0 04.05.2010 20:16