html - How to make different flashcards appear when you hover over different parts of an image

Question

I'm making a website about dragons, and I'd like to have a map of the world that will give you information about some famous dragons when you hover over the country they're from. I've placed circles on different points of a map, and I want different cards to appear when I hover over each of them, but the only function I've found for interactive images is Image Map, and that just brings you to a new page.

      src="https://cdn.glitch.com/68958969-8a64-449b-99cf-41f11e779bac%2Fkayas%20other%20map%20thing.jpg?v=1610909318736"
      usemap="#workmap"
    />

    <map name="workmap">
      <area
        shape="circle" coords="1090,436,28" alt="Computer" href="computer.htm"
      />
    </map>  

If anyone knows how do this, it would be greatly appreciated.

question from:https://stackoverflow.com/questions/65835212/how-to-make-different-flashcards-appear-when-you-hover-over-different-parts-of-a

Answer 1

Using coordinates isn't useful most of the time, try something like this:

CSS:

.map {
    position: absolute;
}

.map img {
    display: block;
    width: 100%;
}

.map a {
    position: absolute;
    top: 53%;
    left: 21%;
    width: 4%;
    height: 4%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.map a + a {
    top: 30%;
    left: 44%;
    width: 4%;
    height: 4%;
    transform-origin: bottom right
}

.map a + a + a{
    top: 20%;
    left: 50%;
    width: 4%;
    height: 4%;
    transform-origin: bottom right
}


.map a + a + a + a{
    top: 40%;
    left: 51%;
    width: 4%;
    height: 4%;
    transform-origin: bottom right
}

.map a + a + a + a + a{
    top: 43%;
    left: 55%;
    width: 4%;
    height: 4%;
    transform-origin: bottom right
}

.map a + a + a + a + a + a{
    top: 40%;
    left: 69%;
    width: 4%;
    height: 4%;
    transform-origin: bottom right
}

.tooltip {
  text-decoration:none;
  position:relative;
}
 
.tooltip span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}
 

 
.tooltip:hover span {
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: auto;
  max-width: 100px;
  min-height: 100px;
  border:1px solid black;
  padding:8px;
}

.image {
    width: 100%;
    height: auto;
}

HTML:

<div class="map">
  <img src="https://cdn.glitch.com/68958969-8a64-449b-99cf-41f11e779bac%2Fkayas%20other%20map%20thing.jpg?v=1610909318736" />
  <a class="tooltip" href="">
   <!-- you can put text here to go in the circles if you wish -->
   <span><img class="image" src="https://via.placeholder.com/200" width="600px" height="300px">
   <h3>Red dragon <br></h3>
    This dragon is from Central america
   </span>
  </a>

  <a class="tooltip" href="">
   <span><img class="image" src="https://via.placeholder.com/200" width="200px" height="200px">
   <h3>Red dragon</h3>
    This dragon is from the United Kingdom
   </span>
  </a>

  <a class="tooltip" href="">
   <span><img class="image" src="https://via.placeholder.com/200" width="600px" height="300px">
   <h3>Red dragon</h3>
    This dragon is from Scandinavia
   </span>
  </a>

  <a class="tooltip" href="">
   <span><img class="image" src="https://via.placeholder.com/200" width="600px" height="300px">
   <h3>Red dragon</h3>
    This dragon is from Greece
   </span>
  </a>

  <a class="tooltip" href="">
   <span><img class="image" src="https://via.placeholder.com/200" width="600px" height="300px">
   <h3>Red dragon</h3>
    This dragon is from Syria
   </span>
  </a>

  <a class="tooltip" href="">
   <span><img class="image" src="https://via.placeholder.com/200" width="600px" height="300px">
   <h3>Red dragon</h3>
    This dragon is from China
   </span>
  </a>
</div>

I used "+ a" for the CSS, you can change these to class names too.