Рейтинг в стиле Эмоджи

[KirKMS]

Дело было вечером и делать было не чего.

Решил фигнёй по страдать.У меня заказали сайт, и заказчик попросил сделать рейтинг для клиента.Которого добавляет.

Правда он выразился так "Сделай рейтинг типо клиент пришел, начал добавлять его и выбрал типо пи**ило,му**ло итд"

Решил на кидать пример.И так получилось,что всё не плохо и смотрится.Правда колхозно.

При нажатие на эмоджика.Остальные пропадают.

 

Спустя 20 минут.Сделал реализацию на сайте

Вот и сами заготовки.

Спойлер

<style>
.left_icon:hover {
    background-color: #e2e2e2 !important;
text-decoration: none;
}
</style>
<script type="text/javascript">

var icon = {
go: function(id) {
  if(id == 1){
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 2){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 3){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 4){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 5){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
  }
  
}
}
</script>		
<div style="float: right;margin-top: 5px;margin-right: 5px;">
<a href="#" onClick="icon.go(1);"><span class="left_icon" id="iconId1"  style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f621.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(2);"><span class="left_icon" id="iconId2" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f612.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(3);"><span class="left_icon" id="iconId3" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f610.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(4);"><span class="left_icon" id="iconId4" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f60a.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(5);"><span class="left_icon" id="iconId5" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f60c.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
</div>

 

P.S Писал через консоль хрома 

Автор: KirKMS

Специально для cmstools.ru

[Shaman Daniels]

6 минут назад, Kir KMS сказал:

пи**ило,му**ло

А-та-та... модератор...

[KirKMS]

2 минуты назад, Shaman Daniels сказал:

А-та-та... модератор...

Ну я же не кого-то матерю

[Klaus]

Прикольно получилось... Может в будущем смогу реализовать...

[Dusty]

Ничего сложного но за идею автору +реп

[KirKMS]

54 минуты назад, Dusty сказал:

Ничего сложного но за идею автору +реп

Хоре тупо посты набивать!!! И где твой плюс в реп? 

[Dusty]

@KirKMS лимит вонючий

[Maskan]

1 минуту назад, KirKMS сказал:

Хоре тупо посты набивать!!! И где твой плюс в реп? 

Держи от меня) 

[Dusty]

[KirKMS]

1 минуту назад, maskan сказал:

Держи от меня) 

 

Только что, Dusty сказал:

Прежде чем постить на форуме!!! Прочтите правила!!!

[Dusty]

@KirKMS открою тебе тайну я не постил я попытался поставить лайк, вот ты кнш ...

[Maxim Lovly]

Ну ладно я тоже поставлю)