davidjbradshaw / image-map-resizer

Responsive HTML Image Maps
MIT License
813 stars 222 forks source link

image resizable via javascript (modal image) #89

Open DoctorSubtilis opened 1 year ago

DoctorSubtilis commented 1 year ago

I tried to adapt your script to an imagemap on an image resized by a javascript, a modal image. But so far, unsuccessfully.
This is my code:

css

`/ modal images BEGIN /

img[onclick] { opacity:1; filter:alpha(opacity=100); -webkit-backface-visibility:hidden; max-width:400px; cursor:pointer; transform: scaleX(1.0) scaleY(1.0); }

.galleria .modal-hover-opacity img {max-width:300px; max-height: 50vh;}

img[onclick]:hover { opacity:0.60; filter:alpha(opacity=60); -webkit-backface-visibility:hidden; }

.modal { z-index: 5; position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); display: none; / hide initially/ justify-content: center; align-items: center; } .modal-content { margin: auto; }

modalimg {

width: auto; height: auto; display: block; margin: auto; max-height: calc(100vh - 2rem); max-width: calc(100% - 2rem); object-fit: fill; border: 5px solid #000; }

.modal-content { animation: fade 2s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

modalimg {

animation: zoom 1s ease; } @keyframes zoom { from { transform: scale(0); } to { transform: scale(1); } }

/ modal images END /`

html

 <map name="mymap">  
    [several area shapes]  
  </map>  
 <p>  
 <img class='fl' width="400px" alt='' tabindex='1' onclick='onClick(this)' usemap='#mymap' src='my-path/my-image.jpg' />  
 </p>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>  
 <script type="text/javascript">  
  imageMapResize();  
 </script>  

 <div id="modaldiv" class="modal" onclick="this.style.display='none'">  
   <div class="modal-content">  
    <img id="modalimg" style="max-width:100%" />  
   </div>  
  </div>    

javascript

 function onClick(element) {  
  document.getElementById("modalimg").src = element.src;  
  document.getElementById("modaldiv").style.display = "flex";  
}  
DoctorSubtilis commented 1 year ago

A different (clearer) way to do my question is: it would be possible to adapt your code to keep an imagemap working, without resizing the whole browser window, bur resizing only the image?