Как создать карту изображений из jpeg, которая затем отображает модальные изображения с текстом

Question

У меня есть jpeg-изображение, которое должно иметь несколько горячих точек, которые будут открывать модальные изображения. Модальные изображения необходимы, потому что мы хотим, чтобы изображение отображалось и имело описательный текст, описывающий конкретную услугу c. Мы используем Bootstrap, поэтому карта изображений должна быть отзывчивой. Я пробовал это разными способами прямо в блокноте ++, но безуспешно. Я сейчас пробую это в Dreamweaver. Я нашел этот код на форуме сообщества Adobe, он работает с моими изображениями на тестовой странице, но применительно к моей реальной странице веб-сайта - нет.

<div class="product">
<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>
<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>
<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>
<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>
<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>
<a href="#" class="hotspot spot_6" data-modal=".modal_6">+</a>
<img src="../images/img_map/pse_23.png" alt="project_arc">

<div class="modal modal_1">
<div class="modal_info">
<img src="../website_2020/images/img_map/tanks.jpg" alt="Tiger">
<h3>FEL 1</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_1 -->
<div class="modal modal_2">
<div class="modal_info">
<img src="../images/img_map/loadout.jpg" alt="Tiger">
<h3>FEL 2</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_2 -->
<div class="modal modal_3">
<div class="modal_info">
<img src="../images/img_map/P5140066.jpg" alt="Tiger">
<h3>FEL 3</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_3 -->
<div class="modal modal_4">
<div class="modal_info">
<img src="../images/img_map/PC130001.jpg" alt="Tiger">
<h3>Detailed Engineering</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_4 -->
<div class="modal modal_5">
<div class="modal_info">
<img src="../images/img_map/girt_install.jpg" alt="Tiger">
<h3>Construction & Purchasing</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_5 -->
<div class="modal modal_6">
<div class="modal_info">
<img src="../images/img_map/fire_protect.jpg" alt="Tiger">
<h3>Commissioning</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<a href="#">X</a>
</div>
<!-- end modal info -->
</div>
<!-- end modal_6 -->
</div>
<!-- end product -->
<!--javascript used -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>
    <script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

<!--css used -->
/*project arc styles*/
.product {position: relative;
width: 95%;
margin: 0 auto;}

@media screen and (max-width: 768px) {

.product {width: 100%;}}

.product img {max-width: 100%;}

.hotspot {position: absolute;
display: inline-block;
background-color: red;
color: #fff;
text-decoration: none;
padding: 10px 15px;
border-radius: 50%;}

.hotspot:hover {background-color: #666;}

@media screen and (max-width: 768px) {
.hotspot {padding: 5px 10px;}}

.spot_1 {top: 60%;
left: 23%;}

.spot_2 {top: 50%;
left: 42%;}

.spot_3 {top: 30%;
left: 55%;}

.spot_4 {top: 20%;
left: 70%;}

.spot_5 {top: 55%;
left: 60%;}

.spot_6 {top: 10%;
left: 80%;}

.modal {position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
display: none;
box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);
width: 40%;
margin: 0 30%;
color: #000;}

.modal h3 {margin: 0;
padding: 10px 0;}

.modal p {margin: 0;
padding: 0 0 5px 0;}

.modal_info {padding: 15px;}

.modal_info a{position: absolute;
top: -28px;
right: 0;
display: inline-block;
text-decoration: none;
background-color: #000;
color: #fff;
padding: 7px 10px 4px 10px;}

@media screen and (max-width: 768px) {.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {
top: 0;
margin: 0 5%;
transform: translateY(0);
width: 90%;}}