So I have to map an image, and I chose to use jQuery. The code works perfectly on my desktop, in the browser, code editors, etc. But whenever I try to port it to the WordPress website I'm managing (using Divi 4.6.6), it doesn't work.

I used the same code for both versions, except for the WP one using jQuery instead of the dollar sign for functions and selectors, because otherwise, WordPress won't recognize them.

UPDATE: jQuery is not noticing the events set for the "area" tags in WP, although it does locally. This is the main problem.

Here's the code in question. It's supposed to show a popup whenever the user hovers the cursor on specific parts of the image:

jQuery(document).ready(function($) {
$(document).ready(function () {
  $("#popup").hide();
  $("area").mouseleave(function(){$("#popup").hide()})
$('area').mouseenter(function(event)
{ 
$("#popup").show()
$('#popup').css("top",event.pageY)
$('#popup').css("left",event.pageX)
;})
})});