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";
}
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