I have successfully created a clickable image on Codepen
<div style="width: 1000px; height: 993.73px;">
<img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg"
alt="Clickable Image" usemap="#image-map" style="max-width: 100%; height: auto;">
</div>
<map name="image-map">
<!-- Define the clickable areas using the shape and coords attributes -->
<!-- Replace x1, y1, x2, y2 with the appropriate coordinates for each area -->
<area class="hoverable-area" shape="circle" coords="670, 772, 50" onclick="openOverlay('https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/244385201_1048371782579748_121321210670771508_n.jpg',
`<table>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Address</th>
<th>Month</th>
<th>Year</th>
<th>Age</th>
<th>Grave ID</th>
</tr>
<tr>
<td>John</td>
<td>Sarah</td>
<td></td>
<td>Chwefror</td>
<td>1912</td>
<td>81</td>
<td>1</td>
</tr>
</table>`);" alt="Area 1"/>
<!-- Add more areas as needed -->
</map>
<div id="overlay" class="overlay" onclick="closeOverlay()">
<div id="popup" class="popup">
<img id="popup-image" src="" alt="Popup Image">
<p id="popup-text"></p>
</div>
</div>
https://codepen.io/charlie-enright/pen/mdQvwrw
My project involves a churchyard survey, with only grave 1 currently being clickable as a test. The code functions correctly in Codepen, but I am unsure of how to integrate it into a WordPress page.
I attempted to paste the HTML into the text editor on WordPress and utilized the header and footer plugin for CSS and JS, but was unsuccessful. Can someone provide guidance on where the HTML, CSS, and JavaScript should be placed in WordPress to ensure functionality on a page?
Thank you.