0

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プラグインはありますか？WordPressがロードする投稿サムネイルを認識できるように、JavaScriptの一部をループ内に含める必要があると考えています。

これを行うためのより良い方法を知っている場合は、共有してください。ありがとう！

編集：@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 '/>';
4

1 に答える 1

0

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 . '"';
}
于 2012-05-26T00:22:25.030 に答える