SO-47873304

by David Thomas

HTML

<div class="container">

  <!-- Background img of character-->
  <img src="https://s2.postimg.org/g9iokigk9/man_cartoon.jpg" width="500px" />

  <!-- Hover circles -->
  <a class="hover-btn-face" data-anatomy="face" style="top:80px; left:225px;">
    <img src="https://s2.postimg.org/mzz5tybft/red-dot.png" />
  </a>

  <a class="hover-btn-shoulder" data-anatomy="shoulder" style="top:150px; left:180px;">
    <img src="https://s2.postimg.org/mzz5tybft/red-dot.png" />
  </a>

  <a class="hover-btn-hand" data-anatomy="hand" style="top:320px; left:170px;">
    <img src="https://s2.postimg.org/mzz5tybft/red-dot.png" />
  </a>


  <!-- Icons that are revealed on click of hover circles -->
  <div class="icon icon-face" style="top:70px; left:0">
    <p>Face</p>
  </div>

  <div class="icon icon-shoulder" style="top:150px; left:0">
    <p>Shoulder</p>
  </div>

  <div class="icon icon-hand" style="top:320px; left:0">
    <p>Hand</p>
  </div>

</div>

CSS

.container {
  position: relative;
}

a {
  position: absolute;
  width: 50px;
  height: 50px;
}

a img {
  display: none;
  width: 100%;
  height: 100%;
}

a:hover img {
  display: block;
}

.icon {
  width: 100px;
  padding: 5px;
  background: blue;
  position: absolute;
  color: #fff;
  text-align: center;
  font-family: arial;
  border-radius: 10px;
}

JavaScript

function showDetails() {
  let part = this.dataset.anatomy;
  document.querySelector('.icon-' + part).style.display = 'block';
}

Array.from(document.querySelectorAll('.icon')).forEach(
  icon => icon.style.display = 'none'
);

let parts = Array.from(document.querySelectorAll('a[data-anatomy]'));

parts.forEach(
  part => part.addEventListener('click', showDetails)
);