javascript - 在 WordPress 中，当鼠标悬停在区域标签上时，Javascript 图像会弹出

Question

我正在 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" />

是否有一个可以与此一起使用的javascript插件？我在想我需要在循环中包含部分 javascript，以便 WordPress 知道要加载的帖子缩略图。

如果您知道更好的方法来做到这一点，请分享。谢谢！

编辑：@PitaJ 的回答正确地引导我找到了这个解决方案：

Javascript：

(function ($) {

var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos = {
            x: event.pageX,
            y: event.pageY
        };
    });
    this.toolTip = function(thumbURL, thumbTitle){
        $("#content").append("<div class='thumbnail' style='position:fixed;width:150px;background:#333;padding:5px;top:" + currentMousePos.y + "px;left:" + currentMousePos.x +"px;'><img src='"+ thumbURL +"' alt='' /><p style='color:#fff;text-align:center;'>" + thumbTitle + "</p></div>");
    };

    this.toolTipHide = function(){
        $(".thumbnail").remove();
    };

})(jQuery);

HTML/PHP（在 WordPress 循环内）：

<area shape="poly" coords="511,75,540,115,560,109,544,58" href="' . get_permalink($id) . '" alt=""'; if(has_post_thumbnail()) { echo ' onMouseOver="toolTip(\'' . $thumb_url . '\', \'' . $thumb_title . '\')" onMouseOut="toolTipHide()"';} echo '/>';

Answer 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" />

JavaScript

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');
}

PHP

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