在WordPress中，当区域标记悬停时，Javascript图像会弹出

我正在WordPress内部构建一个图像地图（形状是不规则的多边形，不能使用CSS），我想在区域标记上加载一个带有onMouseOver的帖子缩略图。以下是我在循环中看到的内容：

<area shape="poly" onMouseOver="<!-- load the_post_thumbnail() as a tooltip -->" coords="511,75,540,115,560,109,544,58" href="<?php get_permalink($id); ?> " alt="Area 1" />

---

HTML/PHP

<area shape="poly" onMouseOver="thumbnailTooltip(<?php echo thumbnail_info(); ?>)" coords="511,75,540,115,560,109,544,58" href="<?php get_permalink($id); ?> " alt="Area 1" />

function thumbnail_info() {
var thumbnailUrl, thumbnailName, thumbnailInfo; // URL, Name, and Info of thumbnail to be displayed
return '"' . thumbnailUrl . '", "' . thumbnailName . '", "' . thumbnailInfo . '"';
}

我在Chrome Inspector中遇到这个错误：未捕获的TypeError:object[object Window]的属性“$”不是函数。这是jQuery冲突问题吗？@kmathis-您可能需要使用
jQuery
代替
$
<area shape="poly" onMouseOver="thumbnailTooltip(<?php echo thumbnail_info(); ?>)" coords="511,75,540,115,560,109,544,58" href="<?php get_permalink($id); ?> " alt="Area 1" />

function thumbnailTooltip(thumbnailUrl, thumbnailName, thumbnailInfo) {
var element = '<div class="thumbnail" id="' + thumbnailName + '"><h3 class="thumbnail_header">' + thumbnailName + '</h3><p class="thumbnail_info">' + thumbnailInfo + '<br /><img class="thumbnail_image" src="' + thumbnailUrl + '" /></p></div>';
$('body').append(element);
$('#' + thumbnailName).css({ 'top': ($(this).offset().top + 'px'), 'left': ($(this).offset().left + 'px'), 'position': 'fixed');
}

function thumbnail_info() {
var thumbnailUrl, thumbnailName, thumbnailInfo; // URL, Name, and Info of thumbnail to be displayed
return '"' . thumbnailUrl . '", "' . thumbnailName . '", "' . thumbnailInfo . '"';
}