Open DoctorSubtilis opened 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:
`/ 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; }
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; } }
animation: zoom 1s ease; } @keyframes zoom { from { transform: scale(0); } to { transform: scale(1); } }
/ modal images END /`
<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>
function onClick(element) { document.getElementById("modalimg").src = element.src; document.getElementById("modaldiv").style.display = "flex"; }
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?
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
javascript