simple css image switch with opacity rollover

Question

Please see the following code pen: http://codepen.io/kishoresahas/pen/epbjRm

function switchImg(i) {
  document.getElementById("imageSRC").src = i;
}

As you can see the function swaps the larger image depending on the thumbnail you select. At the moment if you hover over either thumbnail, the opacity changes as follows:

.button:hover {
  opacity: 0.8
}

What I am trying to achieve is that the selected thumbnail instead receives and stays in the 'opacity hover state' - to indicate its larger counterpart is now being shown and visa versa. So I don't want a hover state, I want a 'selected' opacity effect.

Answer 1

Set also opacity: 0.8 on the id imageSRC

#imageSRC,
.button:hover {
  opacity: 0.8
}

Codepen

Update

If you're not using Jquery use this:

HTML

  <img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">

  <a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg', this)" class="button">
    <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt="">
  </a>

  <a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg', this)" class="button">
    <img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt="">
  </a>

JS

function switchImg(i, self) {
  document.getElementById("imageSRC").src = i;
  removeSelectedThumbnail();
  self.classList.add("selectedThumbnail");
}

function removeSelectedThumbnail() {
  var elems = document.querySelectorAll("a.button");
  [].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bselectedThumbnail\b/, "");
  });
}

CSS

.button:hover,
.selectedThumbnail {
  opacity: 0.8
}

So on every switch, we add a class name selectedThumbnail to the selected thumbnail and define it's opacity for that specific class in the css.

Fiddle

Update : To have the selected thumbnail have the opacity when the page loads, add selectedThumbnail class to the selected one.

eg

<a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg', this)" class="button selectedThumbnail">
  <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt="">
</a>

Fiddle