CODEWITHSUNDEEP
javascriptphphtmlcssnode.js
gvlkn
gvlkn

Reputation: 25

How do they represent the average movie's rating on imdb, rotten tomatoes?

Alright lets say the average rating of a movie/restaurant is 4.3. On the show page you have the name of the object, the description, the contact, images etc etc... then you have the average rating represented in stars. In the object's model you store the rating from every user and with simple mathematical formula you calculate the average. But what I am curious about is how do they represent 4.3 which is 4 stars and a little bit less than 4.5? Isn't it too much to have stored 50 png images? Thanks in advance.

Upvotes: 0

Views: 299

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

It's actually much simpler than it seems. Imagine two elements, stacked on top of one another:

  1. A row of gold stars
  2. A row of gray stars

Then, with a simple image mask you can calculate in js the relative width of the golden star layer.

In greater detail, they actually use a sprite as the very basis:

enter image description here

Play with the width values and you'll see the full effect:

document.querySelector(".one .gold").style.width = "83.5%";
document.querySelector(".two .gold").style.width = "56%";
div{position:relative;height:12px;margin-bottom:10px;width: 140px;
    background:url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png')0 -28px;
}

span{
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  background-image: url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png');
}

.gold{background-position: 0 -42px;}
<div class="one">
  <span class="gold"></span>
</div>

<div class="two">
  <span class="gold"></span>
</div>

Upvotes: 1

Related Questions