Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2018, 17:13
Интересующийся
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 11

Смена изображений при наведении и фиксация при клике
Здравствуйте! Есть форма для добавления отзыва, в ней планируется выставление оценки (от 1 до 5 звезд ). Подскажите пожалуйста как сделать так, чтобы при наведении img пустой звезды (star.png) менялся на img красной звезды (star_red.png), а при клике фиксировался на выбранной. Сам смог сделать только смену при наведении через display:none/display:inline, но думаю все сложнее )

Такую фишку подсмотрел вот на этом сайте: https://molnar.by/otzyvy

Вот html формы:
<div class="stars">
<span class="star f28px required">Оценка</span>
<a class="star_1"><img class="star_img str_1" src="images/reviews/star.png"><img class="str_full_1" src="images/reviews/star_red.png"></a>
<a class="star_2"><img class="star_img str_2" src="images/reviews/star.png"></a>
<a class="star_3"><img class="star_img str_3" src="images/reviews/star.png"></a>
<a class="star_4"><img class="star_img str_4" src="images/reviews/star.png"></a>
<a class="star_5"><img class="star_img str_5" src="images/reviews/star.png"></a>
</div>



А вот CSS:
Код:
.stars {
	padding-top: 23px;
}

.star {
	width: 405px;
	height: 35px;
	margin-left: 40px;
	
}

.star_img {
	width: 34px;
	height: 32px;
	margin: 0 0 -5px 20px;
	padding-top: 10px;
	cursor: pointer;
}

.star_img_full {
	width: 34px;
	height: 32px;
	margin: 0 0 -5px 20px;
	padding-top: 10px;
	cursor: pointer;
	display: none;
}

.botton_reviews {
	float: right;
	border:none;
	width: 215px;
	height: 30px;
	background-color: #c40000;
	padding-top: 4px;
	margin: -32px 32px 0 0;
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2018, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,471

рейтинг звёздочками
Noonf,
https://javascript.ru/forum/misc/470...tml#post310802

https://javascript.ru/forum/jquery/5...my-ocenki.html

https://javascript.ru/forum/misc/656...tml#post433648

https://javascript.ru/forum/misc/585...tml#post439210
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2018, 18:59
Интересующийся
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 11

Спасибо огромное! Как всегда очень помогли!!! )
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2018, 17:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,471

звездный рейтинг
Noonf,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.rating {
  list-style: none;
  padding: 0px;
  margin: 0px;
  cursor: default;
  font-size: 0px;
  user-select: none;
  display: inline-block;
  position: relative;
}
.rating:after {
  font-size: 36px;
  top: 4px;
  left: 100%;
  content:  attr(text);
  color: #FF0000;
  display: block;
  position: absolute;
  margin-left: 12px;
}
.rating > li {
  display: inline-block;
  font-size: 36px;
  cursor: pointer;
}

.rating > li::before {
  content: "★"
}
.stars a.active,
.rating > li.active,
.rating:hover > li {
  color: orange;
}
.rating:hover > li:hover ~ li{
  color:  #000000;
}
.stars  a{
  font-size: 36px;
  cursor: pointer;
}

</style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.rating, .stars span'), function(item) {
        item.addEventListener('click', function(event) {
        event.preventDefault();
        var method = "add", elem = event.target;
        [].forEach.call( item.children, function(el, i) {
               el.classList[method]('active');
               if(el == elem) {
                 method = "remove";
                 item.setAttribute("text", ++i)
               }
        });

        });
    });
    });
  </script>
</head>

<body>
<ul class="rating" >
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul> <br>
<p class="stars">
<span >
<a class="star-1">★</a>
<a class="star-2">★</a>
<a class="star-3">★</a>
<a class="star-4">★</a>
<a class="star-5">★</a>
</span>
</p>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при клике rusher Общие вопросы Javascript 3 29.04.2016 01:13
Смена bg-image при наведении курсора dmitry_martt Элементы интерфейса 6 11.01.2015 14:57
Смена body{background-url} при наведении на ссылку amator0 Элементы интерфейса 2 18.03.2014 20:53
замена изображений в jquery при наведении zlokiz jQuery 0 05.08.2010 22:17
При наведении курсора смена картинки и всплывающая подсказка sly Общие вопросы Javascript 0 06.06.2010 17:53