I could also use several images. But how would the code look like then? If I insert the same code with another img src it doesn't work. 😕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: calibri; } a:link, a:visited{ text-decoration: none; } .modal{ background-color: rgba(0,0,0, .8); width:100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; visibility: hidden; transition: all .5s; } .modal__content{ width: 30%; height: 30%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; border-radius: 1em; opacity: 0; visibility: hidden; transition: all .5s; } #modal:target{ opacity: 1; visibility: visible; } #modal:target .modal__content{ opacity: 1; visibility: visible; } .modal__close{ color: #363636; font-size: 2em; position: absolute; top: .5em; right: 1em; } .modal__heading{ color: #e11021; margin-bottom: 1em; } .modal__paragraph{ line-height: 1.5em; } .modal-open{ display: inline-block; color: #e11021; margin: 2em; } </style> </head> <body> <div class="to is-default-on"> <img src="https://www.expo21xx.com/news/wp-content/uploads/Allied-Mako-G-508-POL-camera-700x389.jpg" width="145" height="126" alt="camera" usemap="#cameramap"> <map name="cameramap"> <area shape="rect" coords="46,38,338,242" alt="links" href="#modal"> <div class="modal" id="modal"> <div class="modal__content"> <a href="#" class="modal__close">×</a> <h2 class="modal__heading">Headline</h2> <p class="modal__paragraph">Content 1.</p> </div> <div class="to is-default-on"> <img src="https://www.alliedvision.com/fileadmin/_processed_/c/e/csm_Alvium_chip_250e5fec08.png" width="145" height="126" alt="camera" usemap="#cameramap"> <map name="cameramap"> <area shape="rect" coords="46,38,338,242" alt="links" href="#modal"> <div class="modal" id="modal"> <div class="modal__content"> <a href="#" class="modal__close">×</a> <h2 class="modal__heading">Headline2</h2> <p class="modal__paragraph">Content 2.</p> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#myModal').on('show.bs.modal', function (e) { var image = $(e.relatedTarget).attr('src'); $(".img-responsive").attr("src", image); }); }); </script> </body> </html>
... View more