Question

I’m building an image map (the shapes are irregular polygons, can’t use CSS) inside of WordPress, and I’d like to load a post thumbnail with onMouseOver on an area tag. Here is what I have inside of the loop:

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

Is there a javascript plugin that will work with this? I’m thinking that I need to contain part of the javascript inside of the loop so WordPress know’s what post thumbnail to load.

If you know of a better way to do this, please share. Thanks!

Edit: @PitaJ’s answer correctly led me to this solution:

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 (inside WordPress loop):

<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 . '"';
}