HTML - использовать карту внутри <table>

Question

"szero.png" и "kibbutz.png" являются круглыми png, и я хочу, чтобы они переключались на "szero_lo go .png" и "kibbutz_lo go .png" соответственно, когда я наводил на них мышь , Я сделал это с некоторыми js функциями, но они занимают все квадратное пространство изображения вместо круглой области.

Есть ли способ использовать карту использования для изображения внутри таблицы? Это не работает для меня.

    <script>
        function showSzero () {
            const logoSzero = document.getElementById('szero');
            logoSzero.style.display = "block";
        }

        function hideSzero () {
            const logoSzero = document.getElementById('szero');
            logoSzero.style.display = "none";
        }

        function showKibbutz () {
            const logoKibbutz = document.getElementById('kibbutz');
            logoKibbutz.style.display = "block";
        }

        function hideKibbutz () {
            const logoKibbutz = document.getElementById('kibbutz');
            logoKibbutz.style.display = "none";
        }
    </script>