Responsive Image map with hover textbox

1
votes

Beginner who tries to code in Html and CSS, without big success ???? ????

I will make a map with Image map that is responsive, and after a lot of effort, I have managed to get the map and the points responsive. But I would like to have hover text boxes over the points with more text information than just the title. I have found an example that is perfect (https://codepen.io/TylerBerry/pen/bNxwJJ), but this solution is not responsive, and I can not manage to combine it with my responsive image map code. Does anyone have any tips on how to do this? I would be very grateful to hear from you. enter image description here

My code so far:

<link rel="stylesheet" href="moon11.css">  

<div class="MapTest"> <!--Flexbox Map -->

    
     <div class="map-pic">
         
         <img src="images/home/map_TestPic.jpg" usemap="#image-map" alt="Route map">
     
        <map name="image-map" id="image-map">
        
        <area target="" alt="Route 1" title="Route 1" href="#" coords="306,574,38" shape="circle" >
        <area target="" alt="Route 2"  title="Route 2" href="#" coords="547,657,38" shape="circle"> 
        <area target="" alt="Route 3" title="Route 3" href="#" coords="342,688,38" shape="circle">
        <area target="" alt="Route 4" title="Route 4" href="#" coords="469,926,38" shape="circle">
     
    </map>   <!-- End of image map -->
   

    </div>  
  
</div>




<!-- Script responsive Image map-->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.rwdimagemaps.min.js"></script>


    <script>
        $(document).ready(function(e){

            $('img[usemap]').rwdImageMaps();
        }); 
    </script> <!-- End script responsive Image map -->

CSS

.MapTest{    /* Flexbox Map */ 
    display: flex; /* Make the container flex items*/
    justify-content: center;
    align-items: center;
    background: #222222;
    height: auto;
}




.map-pic img[usemap] {    /* Style picture map Bergen */ 
    width: 1000px;
    max-width: 50vw;
    cursor: pointer;
}

@media screen and (max-width: 1000px) { /* Change vw for smaller devices */ 
  .map-pic img[usemap]  {
    max-width: 95vw;
  }
}
htmlcsshoverimagemap