How to make a clickable map in wordpress

Question

I have created a clickable image in 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

It's a churchyard survey, so far I have only made grave 1 clickable because I wanted to see if it works before making the rest. The code works successfully in codepen but I do not know how to get it into a wordpress page.

I have tried pasting the HTML into the text editor on word press and used the header and footer plugin for the CSS and JS. but it hasn't worked. Anyone able to give me some advice where the HTML, CSS and javascript should go in wordpress to make this work on a page?

Thanks.

Answer 1

If you are using the new (block-based) post editor in WordPress, use the "Custom HTML" block:

Then your code will be inserted into the website as-is:

(including, but not limited to, possibly overflowing the page, like seen here)

If you are using the Classic Editor plugin, you'll need to switch to Text mode on top-right, and then you'll be able to paste your HTML.

CSS and JavaScript can be inserted inline as <style> and <script> tags if this is a one-off thing for a page.