CODEWITHSUNDEEP
javascriptjquerymouseover
WestCoast
WestCoast

Reputation: 5

Swap Multiple Images on mouseover

I am wanting to swap multiple images on mouseover and am looking for a way to do this. I am looking to 'light up' multiple stars. The code below works fine for one, but what is the best way to light up e.g 3 stars when the cursor hovers over the third star? 

<div class="rating" data-value="4">
 <img src="star.png"/>
 <img src="star.png"/>
 <img src="star.png"/>
 <img src="star.png"/>
</div>

and the JS:

$(".rating > img") .mouseover(function () {
            this.src= "star-on.png";
        }).mouseout(function () {
            this.src= "star.png";

});

Upvotes: 0

Views: 850

Answers (3)

Miguel
Miguel

Reputation: 20633

Here's an example in plain vanilla JavaScript:

var stars = document.querySelector('.stars')

stars.addEventListener('mouseover', function(event) {
  var target = event.target
  var index = target.dataset.index

  for (var i = 0; i < 5; i++) {
    var star = stars.querySelector('[data-index="' + i + '"]')
    star.classList.toggle('active', i <= index)
  }
})

stars.addEventListener('mouseleave', function(event) {
  for (var i = 0; i < 5; i++) {
    var star = stars.querySelector('[data-index="' + i + '"]')
    star.classList.toggle('active', false)
  }
})
.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background: white;
}

.star.active {
  background: yellow;
}
<div class="stars">
  <div class="star" data-index="0"></div>
  <div class="star" data-index="1"></div>
  <div class="star" data-index="2"></div>
  <div class="star" data-index="3"></div>
  <div class="star" data-index="4"></div>
</div>

Upvotes: 0

Maciej Kwas
Maciej Kwas

Reputation: 6439

I would just like to mention that this is easily achieveable with pure css and flexbox features: 

* {box-sizing:border-box;}

body {padding:30px;}

.stars {
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:row-reverse;
}

.stars .star {
  flex: 0 1 50px;
  background:red;
  padding:20px;
}

.stars .star:hover, .stars .star:hover ~ .star {
  background:salmon;
}
<div class="stars">
  <div class="star">4</div>
  <div class="star">3</div>
  <div class="star">2</div>
  <div class="star">1</div>
</div>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

You can do this by getting the index of the star within the set that was moused over and then replacing the correct amount of stars based on that index:

$(".rating > img").mouseover(function () {
    // Get the index of the star that is being hovered over
    var idx = $("img").index(this);
   
    // Loop only over the stars that should be highlighted and highlight them.
    // Use the index to know how many to loop over
    for(var i = 0; i < idx + 1; i++){
      // "Light up" the star:
      $(".rating > img")[i].src= "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/2000px-Full_Star_Blue.svg.png";
    }
  }).mouseout(function () {
        
    // Turn off all stars
    $(".rating > img").each(function(){
    this.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"
  });

});
img {
 width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-value="4">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
</div>

Upvotes: 2

Related Questions