Change which image is displayed on hover and click

I’m not a developer. I’ve been however tasked with coming up with a solution for a small project at work with jQuery and I have no clue where to begin. Here’s my codepen: https://codepen.io/axo1/pen/mdBLRjL

What I need to is this (all graphics and texts are placeholders):

What I managed to achieve

Image item1 is supposed to be the first visible,
Hovering on the buttons below the graphic changes which image is displayed,

What I don’t know how to achieve

The buttons below should be clickable. Clicking on a button changes the “active” graphic above. For example: if I click on the Second item button, the item2 image will be displayed even after I unhover the button, and so forth.

Any tips of what I should look into?

Unfortunately jQuery is heavily preferred here.

$(document).on({
  mouseenter: function() {
    $(".item1").toggleClass("active hidden");
    $(".item2").toggleClass("hidden");
  },
  mouseleave: function() {
    $(".item1").toggleClass("active hidden");
    $(".item2").toggleClass("hidden");
  }
}, ".item2btn");

$(document).on({
  mouseenter: function() {
    $(".item1").toggleClass("active hidden");
    $(".item3").toggleClass("hidden");
  },
  mouseleave: function() {
    $(".item1").toggleClass("active hidden");
    $(".item3").toggleClass("hidden");
  }
}, ".item3btn");

img {
  max-width: 15%;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  visibility: hidden;
}

.active {
  visibility: visible;
}

#container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  position: absolute;
  top: 250px;
}

#container ul {
  padding: 1em;
}

#container ul>li {
  background: black;
  margin: 1em;
  padding: 1em;
  list-style-type: none;
  display: inline;
}

#container ul>li:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">

<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">

<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">

<div id="container">
  <ul>
    <li class="item1btn">First item</li>
    <li class="item2btn">Second item</li>
    <li class="item3btn">Third item</li>
  </ul>
</div>

Answer

Here is a working version

I kept your style – I think it can be shortened to be more DRY

const $images = $(".items")
let $currentItem = $(".items").eq(0)
$("#container li").on({
  "click": function() {
    const id = $(this).data("id").replace("btn", "");
    $images
      .removeClass("active")
      .addClass("hidden")
    $currentItem = $(`.${id}`)
      .removeClass("hidden")
      .addClass("active");
  },
  "mouseover": function() {
    const id = $(this).data("id").replace("btn", "");
    $images
      .removeClass("active")
      .addClass("hidden")
    $(`.${id}`)
      .removeClass("hidden")
      .addClass("active");
  },
  "mouseout": function() {
    $images
      .removeClass("active")
      .addClass("hidden")
    $currentItem
      .removeClass("hidden")
      .addClass("active");
  }
})

img {
  max-width: 15%;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  visibility: hidden;
}

.active {
  visibility: visible;
}

#container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  position: absolute;
  top: 250px;
}

#container ul {
  padding: 1em;
}

#container ul>li {
  background: black;
  margin: 1em;
  padding: 1em;
  list-style-type: none;
  display: inline;
}

#container ul>li:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">

<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">

<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">

<div id="container">
  <ul>
    <li data-id="item1">First item</li>
    <li data-id="item2">Second item</li>
    <li data-id="item3">Third item</li>
  </ul>
</div>

Advertisement

Answer